Consider the following inline code below:
<h1 id="top">Top Of Page</h1>
...
<a class='reload' onClick='window.location.reload();'>Reload</a>
How would one implement this in a fashion where when the window reloads, it goes to the top of the page of hits the anchor? I tried just doing:
reload to top of page
$(window).on('load', function(){
$('html, body').scrollTop(0);
});
and:
Reload browser does not reset page to top
$(document).ready(function(){
$(this).scrollTop(0);
});
Directly in the related template but it wouldn't load to top? Besides jQuery not being included Why would that be?
Is there a way to do this inline to keep consistent? so something like (which I tried):
<a class='reload' onClick='window.location.reload().scrollTop(0);'>Reload</a>
Which doesn't go to the top of the page, either.
I then thought to do the href of the id I can anchor to:
anchor jumping by using javascript (slightly tweaked to my situation)
<script type="text/javascript">
function goToTop(){
var url = location.href;
location.href = url + "#top";
}
</script>
<a class='reload' onClick='goToTop()'>Reload</a>
In this approach, it just adds "#top" to the URL and nothing else.
I was under the impression what if you change location.href it redirects to the new URL. It says here that "The href property sets or returns the entire URL of the current page." Why won't it set it in the above function?
This seems pretty simple so I'm not understanding what I'm missing?
You just need to add window.location.reload(true) after the line where you set [window.]location.href to your anchor.
Related
Posting answer by #epascarello embedded in comments, above, as it worked for me and is the simplest answer I've seen.
If you don't need/want any animated reload actions, simply use two different events - first to move the current page/scroll location to the top [window.scrollTo(0,0);] and then reload the page, either from the cache [window.location.reload();] or from the server if you've updated any of the needed data [window.location.reload(true);]. So,
// Moving page to top on forced reload in javascript
window.scrollTo(0,0);
window.location.reload(); //or window.location.reload(true) to use new/updated data from the server
Hope this helps others. Thanks, again, #epascarello!
Related
I've build up an menu with jQuery.jsTree and every item should contain a link to a specific page. With jsTree it isnt possible to click these links due to the prevention of the standard behaviour of
<a href="index.php?content=example" ... >....</a>
links (this is actually an example of one of my links. The index.php is my standard page and just the content will be replaced). In order to fix that I found this solution:
jQuery(".tree").bind("select_node.jstree", function (e, data) {
document.location = data.rslt.obj.children("a").attr("href");
});
This solution works partly for me, which means the clicked link works but in the opened window Firebug tells me that jQuery is not defined. Is it possible that on document.location the browser "forget" the library imports (as I mentioned I stay on the index.php page and just replace the content)?
and the other question is: does anyone may know a better solution for the enabling of the links in jsTree without edit the library itself ?
thanks in advance!
If your links at first look like:
<a href="index.php?content=example" ... >....</a>
And you want to load the content into a div with ID maincontent
You can do something like:
$(".tree a").each(function(){
var $this = $(this);
$this.click(function(){
$("#maincontent").load($this.href, function(){
// this callback functions fires once load is complete,
// incase you need to do post-load operations
});
return false;
});
});
This will byposs loading the new page as a normal link would, and fetch the page via AJAX and load the returned HTML into the DIV with ID maincontent.
Code is untested, but I've done this in the past so should work as is.
Greetings I'm working on a gallery script and would like to have it so when the page is loaded it is automatically positioned to the top of an anchor I have set. I've tried this code:
<script>location.href = "#trendnav";</script>
<a name="trendnav"></a>
And it doesn't seem to do anything. The more instantaneous this seems to the user, the better.
Try
window.location.hash = "#VALUE";
Fiddle Demo 1
Fiddle Demo 2
or
window.scrollTo
Or, using your original approach:
$('span#godown').click(function(){location='#anchor';});
See here http://jsfiddle.net/dxNKG/1/
. I assigned a clickable span with the task of being the button that triggers it.
Actually, your original syntax location.href='#anchor' is correct, but you should fire it only after the DOM has loaded completely. So, either put the <script> section at the end of your page or do something like
window.onload=function(){window.location.href='#anchor';};
see here http://jsfiddle.net/bUaTT/ (without jQuery)
or, since you are using jQuery:
$(function(){window.location.href='#anchor';})
In my website, I build the page navigation based on hashchange:
var hashHome;
$(window).bind( 'hashchange', function(e) {
var homeClass = "home";
var url = $.param.fragment();
if($('#page-content').hasClass(homeClass)){
hashHome = $('#page-content').html();
}
if(url ==''){
//homepage with nothing(no hash)
if(!$('#page-content').hasClass(homeClass)){
//alert("load frim cache ->#"+url);
$('#page-content').addClass(homeClass);
$('#page-content').html(hashHome);
}
}else{
//go to some page
if($('#page-content').hasClass(homeClass))
$('#page-content').removeClass(homeClass);
initAction(url);
}
})
$(window).trigger( 'hashchange' );
When the site loads its homepage, the homepage gets stored in hashHome. If user navigates away, the initAction(id) replaces the entire $('#page-content')'s content with other pages' content. When the uses navigates back to home, it restores the stored home back to the $('#page-content').
My problem is that all of the jQuery stopped working on the homepage.
I've read about live() already but it seems that it needs a event like click() for it to work. How do I fix this?
I figured out that i need to store my entire page before i change the content of the div that is surrounding it
var content$('#page-content').html();
then do the content change
that way, when i reinitialize all my jQuery plugins, they will loose all of their old reference and use the new content variable, instead of a double initialization
and finally, i've the original question's code also won't work since the script tag look like this: <script type="text/javascript">...</script>, IE for some reasons won't recognize this, so I have to change it to <script></script> in order to make it cross browser compatible
I'm designing an HTML page which has one button. The user clicks the button and a simple jQuery script animates that div away, revealing lower page content. You can see it here.
I've noticed that it looks/works fine the first time, but if I refresh the page with the browser button, it doesn't fully reset. The initial container is only half on the page. If I enter the URL again and load the page, it resets as expected.
NOTE: This only happens if you scroll down a bit after clicking the initial button... which seems weird.
I had no idea that there was any difference between these two operations, but there clearly is. What is the difference and how can I fix this problem from happening?
Here's my jQuery code, in case it's relevant:
$(document).ready(function(){
var faqs = $("#FAQ");
$("#learnmore").click(
function(){
$("#home").animate({top:'-=1066px'},600);
$("#more").animate({top:'-=1066px'}, 600, function() {$("#background").hide();} );
$("body").css('overflow-y', 'scroll');
//$("#home").slideUp();
console.log("jquery loaded");
}
);
});
It happens because it is cached by the browser.
If you styles are regularly modiefied, then as easy fix is to attach a unique id on the end of the reference, like
<link href="style.css?time=168768234928" ..../>
What it does, it makes the browser think it is a new request everytime it loads.
It happens because browser trying to scroll to the same position, what was before page reload. To check it, try press button and don't scroll to bottom of page and then reload page.
Okey, the reason is clear.
Now we need solution. Try this:
#more {display:none}
in your css. And then use
$("#more").show().animate(...
in your $("#learnmore").click() function. I hope this will solve the problem.
Is there a way to push the browser back to the top of the page when a link is clicked? I am dynamically changing some content but the project needs the user to start at the top of the page when the new content is loaded.
I am already using the url hash tag to keep track of the history. Just looking for some type of javascript function to do this.
What you probably want is scroll(0,0).
As a link:
back to the top
Or just the javascript itself (integrated in a function):
function onContentLoad() {
scroll(0,0);
}
For further reference:
http://developer.mozilla.org/en/window.scroll
http://msdn.microsoft.com/en-us/library/
inflagranti's answer is right about the way to do it using javascript.
If you use jQuery you can also animate the scroll to top action.
$('html, body').animate({scrollTop:0}, 'slow');
You could create an anchor at the top of the page wether it contain text or not.
Then on your link have to refer to the anchor.
Example:
Create an anchor:
<a name="tips">Useful Tips Section</a>
or
<a name="top"></a>
Then create a link to said anchor:
Visit the Useful Tips Section
or
Go to top.
Ta da.