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
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 ).
you all have used pinterest, you can see that when you click on any pin, a div is added and lightbox is shown on the same page but the url is changed to that of actual pin page. i have the same lightbox to show data, is it possible to change the url like that?..
one thing i want to tell is that, i have link which has onclick event which calls view() method, in which i am calling another page with ajax request, which shows the content of that page on my page, i want to change url when this link is clicked and back to previous url when closed..here is my code
function view(){
$.get('mypage.jsp', function(html) {
$(html).hide().appendTo('body').fadeIn(500);
}, 'html');
};
This feature is known as HTML5 Push State. Here's a related StackOverflow question which may provide more insight. Good tutorial for using HTML5 History API (Pushstate?)
I haven't checked Pintrest's solution. But is hash what you're looking for?
window.location.hash="Whatever-you-want-to-add-to-the-URL"
This will change http://stackoverflow.com/posts/11968693/ to http://stackoverflow.com/posts/11968693/#Whatever-you-want-to-add-to-the-URL
Yes, with HTML5's new history API. Where the lightbox is triggered, add something like this:
var hist = window.history;
hist.pushState({ image: [IMAGE URL] }, 'lightbox', [URL]);
This will change the current URL without reloading the page, and will create an entry in the browser history, so users can use their browser back button to return to the previous state (in this case, before they opened the lightbox).
You can change the url (not only the hash) by using the pushState or replaceState functions on the history object. More details: http://diveintohtml5.info/history.html
When the user clicks a button, I want his browser to automatically scroll to an <a> with a certain href (let's call it "abc"). Ideally the scrolling would be nicely animated in some way.
Give a look to the jQuery.scrollTo plugin.
With that plugin you could simply:
$.scrollTo('a[href=abc]');
Way simpler:
element_to_scroll_to = document.getElementById('anchorName2');
element_to_scroll_to.scrollIntoView();
Even no need for jQuery ;)
You don't need any plugin.
$(document.documentElement).animate({
scrollTop: $('a#abc').offset().top
});
I have various links which all have unique id's that are "pseudo-anchors." I want them to affect the url hash value and the click magic is all handled by some mootools code. However, when I click on the links they scroll to themselves (or to the top in one case). I don't want to scroll anywhere, but also need my javascript to execute and to have the hash value in the url update.
Simulated sample code:
button 1
button 2
Home
So if you were to click on the "button 1" link, the url could be http://example.com/foo.php#button1
Does anyone have any ideas for this? Simply having some javascript return void kills the scrolling but also kills my javascript (though I could probably work around that with an onclick) but more importantly, prevents the hash value in the url to change.
The whole point of an anchor link is to scroll a page to a particular point. So if you don't want that to happen, you need to attach an onclick handler and return false. Even just adding it as an attribute should work:
button 1
A side of effect of the above is that the URL itself won't change, since returning false will cancel the event. So since you want the URL to actually change, you can set the window.location.hash variable to the value that you want (that is the only property of the URL that you can change without the browser forcing a reload). You can probably attach an event handler and call something like window.location.hash = this.id though I'm not sure how mootools handles events.
(Also you need all of the IDs to be unique)
You can use the code below to avoid scrolling:
linktxt
I'm probably missing something, but why not just give them different IDs?
button 1
button 2
Home
Or whatever convention you'd prefer.
Also, preventDefault
$(your-selector).click(function (event) {
event.preventDefault();
//rest of your code here
}
I found the solution. Here I save an old location from calling href
and restore it after scrolling
<script language="JavaScript" type="text/javascript">
<!--
function keepLocation(oldOffset) {
if (window.pageYOffset!= null){
st=oldOffset;
}
if (document.body.scrollWidth!= null){
st=oldOffset;
}
setTimeout('window.scrollTo(0,st)',10);
}
//-->
</script>
and in body of page
<a href="#tab1" onclick="keepLocation(window.pageYOffset);" >Item</a>
Thanks to sitepoint
An easier way would probably be to add it as a GET. That is, http://example.com/foo.php?q=#button1 instead of http://example.com/foo.php#button1
This won't have any effect on how the page is displayed (unless you want it to), and most scripting languages already have tools in place to easily (and safely) read the data.
Well here we are 7 years after this answer was published and I found a different way to make it work: just point the window.location.hash to a non-existent anchor! It doesn't work for <a>s but works perfectly in <div>s.
<div onclick="window.location.hash = '#NonExistentAnchor';">button 1</div>
Worked fine in Chrome 56, Firefox 52 and Edge (IE?) 38. Another good point is that this doesn't produce any console errors or warnings.
Hope it helps somebody besides me.
There is a solution without any JavaScript at all:
I will not jump to the top
Use
button 1
where
function setHash(hash) {
event.preventDefault();
history.pushState(null, null, "#"+hash);
}
event.preventDefault() stops browser from what it normally would do on clicking, and history.pushState adds to the sessions history stack.
For further discussion, see here and here