Scroll to fragment identifier on new page at load w/ JQuery?

Question

I'm trying to see if its possible to have some simple HTML markup like so:

<a href="www.mysite.com/pageXXX#location1"></a>
<a href="www.mysite.com/page1#location1"></a>
<a href="www.mysite.com/page2#location1"></a>
<a href="www.mysite.com/page3#location1"></a>

...and then, have it scroll down to the ID #location1 when the new page loads with a simple JQuery script of some sort? Or if this is something that could be achieved with the scrollTo plugin, how might I go about that instead?

The catch is that the link exists on pageXXX, and the ID to be scrolled to is on ALL pages, ie. pageXXX, page1, page2, page3, etc......Ideally, if there's also a way to remove the hash mark and the identifier from the URL that would be great too, but at the moment just having it smoothly scroll down to the ID on the new page is all I'm after.

So you want a smooth scroll? Because jumping to the location works "out of the box" without any JavaScript. — Felix Kling, Mar 03 '11 at 09:37
Correct, I already have it working just fine as is without JQuery, but its that abrupt jump that Id like to eliminate if possible....So yes, a smooth scroll would be fantastic - say around the "slow" speed when using JQuery. — Mr.Brown, Mar 03 '11 at 09:39
Mr. Brown, the link i gave you will give you a smooth scroll — benhowdle89, Mar 03 '11 at 09:40
Felix have you got any input on this one possibly? Still stuck in the same place I was originally. — Mr.Brown, Mar 05 '11 at 01:00

score 7 · Answer 1 · edited Nov 19 '18 at 04:50

7

You could add a setTimeout so it waits a bit then scrolls down?

function goToByScroll(id){
        $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}
var hash = window.location.hash;

setTimeout(function(){
      goToByScroll(hash);
},2000);

edited Nov 19 '18 at 04:50

Rob

26,989
16
82
98

answered Mar 03 '11 at 09:36

benhowdle89

36,900
69
202
331

Thanks for the response, thats just what Im looking for but will this be applicable when **loading a new page** where the identifier exists? – Mr.Brown Mar 03 '11 at 09:41
Well what you can do is use jQuery to grab the hash value from the URL and stick it in this scroll function? – benhowdle89 Mar 03 '11 at 09:47
Sorry if I wasnt descriptive enough...the catch is that the link exists on **page1**, and the *ID* is on **page2** - the ID on page 2 is the one Id like to smoothly scroll down to..........Ideally, if theres also a way to remove the hash mark and also the identifier from the URL that would be great too, but at the moment just having it smoothly scroll down to the ID on the **new** page is all Im after. – Mr.Brown Mar 03 '11 at 09:48
Yep, so on page one, click page3#location1, on page 2 use jQuery to grab "location1" and insert it into the scroll function, you understand? – benhowdle89 Mar 03 '11 at 09:52
Kinda, not following your logic entirely though plus Im pretty green with JQuery still...Sorry dude. I can usually figure it out pretty easy though when I can dig into something with Firebug. :( – Mr.Brown Mar 03 '11 at 09:56
http://stackoverflow.com/questions/1822598/getting-url-hash-location-and-using-it-in-jquery – benhowdle89 Mar 03 '11 at 09:58
It sounds like thats kind of a vulnerable way of removing the hash though, plus thats really not as important as achieving the scroll to on the new page, thats my main concern... – Mr.Brown Mar 03 '11 at 10:06
hmmm, well you may want to use PHP and pass a GET/POST parameter if you are worried about vulnerability – benhowdle89 Mar 03 '11 at 10:08
So I tried using the function and method from the example in the link you offered earlier but it scrolls to the ID first before loading the new page where the element is (All pages share the same element which Id like to scroll to) – Mr.Brown Mar 03 '11 at 10:16
Thats why i'm saying do it on a setTimeout, that way it definitely waits for the page to load before scrolling down: http://forum.jquery.com/topic/settimeout-15-6-2010 – benhowdle89 Mar 03 '11 at 10:21
Gotcha, hate to appear super green here but Im not really sure how to mark that up is the thing......Do I put it before the Function then? – Mr.Brown Mar 03 '11 at 10:23
You put anything to do with scroll inside the settimeout function, then 800 = milliseconds to wait, ie. 1000 = 1 sec. If you're worried about markup, start a new question on this site. Remember to accept my answer if it was helpful! – benhowdle89 Mar 03 '11 at 10:27
So I tried wrapping the settimeout around the slideto function with no avail. Couldnt get it to work. Firebug didnt report any errors but nothing happened either. – Mr.Brown Mar 03 '11 at 10:39
Thanks for spending the time to do that Ben. I tried it out and unfortunately it still behaves the same as it did before where it slides up first and then attempts to load the second page. I even tried increasing the time by double, still no go though. – Mr.Brown Mar 03 '11 at 10:48
Maybe theres something wrong with my html then...heres what my markup looks like alongside your script: `` – Mr.Brown Mar 03 '11 at 10:50
Well Im trying to use this as a global effect since the ID that Im scrolling to exists on all pages, so Ive placed the script into its own respective JS file which exists in a JS folder. Its then being called with the `onclick="goToByScroll('nav')` when needed. – Mr.Brown Mar 03 '11 at 11:12
Hmmm, i dont think you are implementing it right. Stick my code in your JS file, include it on every page. Use normal href's (no js) and mark them up like this: href="page3#location1", simple. so when the user clicks the hyperlink, the jquery will realise it has a hash value on the end and carry out the scrollto function after a specified amount of milliseconds :) – benhowdle89 Mar 03 '11 at 11:19
Sorry, it was past 3am and I had to shut it down, super burnt out....thanks for sticking with me, Ill give that a try and report back. – Mr.Brown Mar 03 '11 at 21:24
Ok, tried it out as you said and Firebug is reporting an error: `uncaught exception: Syntax error, unrecognized expression: #` .....It also doesnt seem to scroll to the ID, it just behaves as a normal fragmented id. – Mr.Brown Mar 03 '11 at 21:38
But this is happening after page load, don't you have to stop the new page from jumping to the hash somehow? – Marcy Sutton May 19 '11 at 21:21

score 0 · Answer 2 · answered Jul 05 '11 at 13:09

An alternative:

Instead of

<a href="www.mysite.com/pageXXX#location1"></a>

Try

<a href="www.mysite.com/pageXXX?location1"></a>

You can get the hash to put into the link this way:

var nothash = window.location.search;
var hash = nothash.substring(1);

Reference: https://developer.mozilla.org/en/DOM/window.location

Here you prevent the page from jumbing anywhere and you can do the next steps (putting the hash in a animated scroll function) without worrying about, if it fires fast enough.

Scroll to fragment identifier on new page at load w/ JQuery?

2 Answers2