Animate Page Scroll with jQuery

So on pages with lots of anchors (a name) there is a lot of jumping down the page. Well that isn't very nice.

So on facebook yesterday I saw when you loaded a page it scrolls to that anchor instead of jumping.

So this is a quick and dirty way to make all of your anchors including when the page loads, to scroll instead of jump

not ie tested - don't care

Category:

Science & Technology

Tags:

• scroll
• animate
• page
• document
• body
• jquery
• slide
• anchor
• jump
• local

[iiamshad]

Thank you very much for posting this awesome tutorial. I'm not sure if your answering any questions but I'll give it a shot. When using the "easing" technique is it possible to use the tooltop jQuery script also? Seems when I using a tooltop function then use that to scroll down it doesn't work. Its almost like I can only use on or the other. Let me know if this is possible. Again, thanks

[optikalefxx]

@iiamshad can you explain what the issue is a lil more? If your talkign about the jquery tooltip from jquery tools it might have issues because they don't follow the jquery standards. But idk yet.

[thomaskirk3]

Doesn't work with crhome. Any ideas why?

[optikalefxx]

@thomaskirk3 yes, chrome updated and killed some stuff. change the toPosition to this line

var toPosition = $toElement[0].offsetTop;

[itsrron]

my links are div tag not a tag and so are my anchor point ie: contact button(div tag) links to div id="contact" but it does not work

i changed the all the a tags to div tags in the script but still nothing?

[optikalefxx]

@itsrron You really should change them back to A tags. Reason is if javascript is turned off the anchors still work.

At any rate, lets see the code and ill take a look

[demesamarcclenn]

Genius! thanks man!!!:))

[nycpd75]

@optikalefxx how do i place this jquery effect to apply only to a div class? like i have a menu on the left side and a content div on the right site i want to click on the menu and the menu just stays and it automatially scrolls the right side to the a tag ?:S

[nycpd75]

@optikalefxx hey i need ur help !!!!

[nycpd75]

i love hash

[S3rbi4n]

how to activate slide without any event?! thanks, aleksandar.

[10goodday]

Hi,

Great tutorial! I used it for my site and it is looking very nice. My only issue is that my external links to other pages or other sites are not working. Is there a way to fix that?

Thank you :)

By the way, this is the first time I am working with jQuery ;)

[thomaskirk3]

@optikalefxx Thanks alot! New to jQuery... I was getting ready to start coding a solution for smooth scroll in javascript... However, one line is a bit easier to change...