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.
Related
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!
Ok, I have a few issues... I'm building my site with bootstrap/jquery. I'm using bootstrap nav and all nav links are hash links to different containers on the same page.
Issue #1
When using the method below to 'hijack' the link I lose the URL address thus look the ability for people to grab the link and share or link to it later.
Issue #2
There are a few other pages with content that aren't on the homepage. So obviously when users click on the link /somepage/#photography doesn't work. Is the only solution here to not use relative links?
<nav>
Photography
</nav>
// smooth scroll from navigation
$('nav a').click(function(evt){
evt.preventDefault();
var $section = $($(this).attr('href'));
scrollToObject($section);
});
Issue 1: the reason for losing the hash at the end of the URL is because the call to evt.preventDefault() is preventing the hash from being added.
I am not 100% sure on the inner-workings of the scroll effect in scrollToObject(), but if you can provide a callback function when the scrolling is complete you could then add location.assign( evt.target.hash ); which will add the hash to the URL (and it will show up in the user's history.) Of course, you can get the hash value from the anchor object, event, etc.
You can read about the location interface in js on MDN here: https://developer.mozilla.org/en-US/docs/Web/API/Location
Issue 2: You could actually accomplish this once again using location.assign(). Once again, without seeing all of your code, you can create a conditional in a callback and then send the user back to the page with the scrolling anchors: location.assign( location.origin + '/' + evt.target.hash ).
I need help with a jQuery function that will allow me to use hashtags to scroll to an anchor point on a .load() page.
Basically someone clicks on a homepage link and it opens up a model window that they use to navigate the remainder of the website. This window then uses the same code to open up any other links on the site. I know the format of these links is not optimal, but it's what I am required to work with.
I have the following code that is displayed in a model window.
<div id="pop-top-menu">
<p class="p_text">
Go Back |
View by Resorts |
View our Private Homes |
View our Properties with Discount Coupons</p>
</div>
When someone clicks on one of those links, it will then go though this code:
function pop(id) {
$("#body-cover").fadeIn(1000);
$("#slide-content").load(id).slideDown(1000);
$("#slide-content-close").delay(2000).fadeIn(1000);
}
So I need to have the visitor click on properties.php#property_id and it load the page properties.php and THEN navigate to the anchor tag. Not all links will have anchors, but many will.
Please note, this is not anchor-based navigation. This is loading a link and THEN navigating to the anchor provided (if it exists).
Untested, but when I understood your question correctly you could modify your pop function like this:
function pop(id) {
// Expression to test if id has a hashtag
var hasHash = /(#([^ ]*)/,
$hashID;
$("#body-cover").fadeIn(1000);
$("#slide-content").load(id).slideDown(1000);
$("#slide-content-close").delay(2000).fadeIn(1000);
if(hasHash.test(id)!== false) {
// hasfound - grep it, and make a jQuery Object
$hashID = $('#' + id.split('#')[1]);
if($hashID.length) {
// if it is found, scroll to this element with an animation
// in case you just want a jump, simply set scrollTop
// and remove the animate method
$('html, body').animate({
scrollTop: $hashID.offset().top
}, 2000);
}
}
}
How would I go about putting a link on a page that changes the url, but doesn't change the page without using hash states?
I want to put links that change the url and scroll to a corresponding section of the page. I don't want to use hashes as they just jump to the section instead of scrolling, and I think hashes dont look very good in the url.
Take a look at HTML5 Push State
There is no other way as far as I know.
Have you tried the jQuery ScrollTo plugin? http://archive.plugins.jquery.com/project/ScrollTo
Browsers now have security features that ensure that the URL displayed in the location bar matches what's actually being displayed. You can't change the location without changing the page at the same time.
However, you can scroll the page anywhere you like without changing the URL. To scroll to a particular element, get its position and use .animate():
$('body').animate({scrollTop: $('#element').position().top});
Combine this with an .on('click',...) handler that uses e.preventDefault() to cancel the URL change and you're good to go.
$('a[href^=#]').on('click', function(e) { // apply to all hash links
var el = $(this).attr('href'); // get the href
e.preventDefault(); // cancel default click action
$('body').animate({
scrollTop: $(el).position().top // scroll to the href ID instead
});
});
http://jsfiddle.net/mblase75/WFKUE/
HTML5 browser history (aka PushState) is the modern approach
https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history
It is fairly widely supported in browsers
http://caniuse.com/history
I have a anchor tag that when you click on the "Up to the Top", it will move the web page to the top of the page. My anchor tag is #PAGETOP.
My question is, I am using the jQuery UI Dialog and basically would like to programmatically activate this #PAGETOP anchor so whenever the page always loads at startup, would like to ensure that the page moves immediately to the top of the page.
I would like to emulate the way stackoverflow moves to the top of all your questions when you paginate to the next page (if possible).
Thanks.
To move to the 'PAGETOP' anchor in Javascript, use this:
location.hash = 'PAGETOP';
If you're wanting to do it on page load, in jQuery it'd be like this:
$(function() {
location.hash = 'PAGETOP';
});
Or take #Kip's idea and go pro with the scrollTo jQuery plugin. This plugin has additional options for different animations etc
<script>
$.scrollTo( "#PAGETOP", 1000 );
</script>