2009
10.07

Animated scroll to anchor/id function with jQuery

Category: javascript / Tag: , , , , , , , , , , , , , , ,  / Add Comment

Today I had to make a function for a client of mine so I decided to share it with you.

It’s a oneliner but can add a really nice effect to your website.

This function needs jQuery

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

Of course you can change slow to normal or fast or even a int in milliseconds.

And to call it

<script>
goToByScroll("theIdIWantToGoTo");
</script>

Enjoy

  • Share/Bookmark

Related Posts:

18 comments so far

Add Your Comment
  1. Nicholas Reed said: 2009.11.09 12:36

    This code saved me, I’ll send you a link to the site I’m working on when its finished.

  2. Christophe Verbinnen said: 2009.11.09 13:21

    Glad to hear this ! Good luck

  3. Jamie said: 2009.11.09 17:05

    ABSOLUTELY BRILLIANT!! I have been looking for this for a long time!! Thank you soooo much!!

  4. mehdi karamnejad said: 2009.11.14 13:03

    always share the code you write for your clients! :D

  5. JS said: 2009.11.20 18:55

    thanks! at least i can understand this tutorial

  6. kazes said: 2009.12.23 16:02

    thanks.
    I avoid installing “scrollTo” jQuery plugin (which is good but too much for what I needed =)

  7. lvp said: 2010.02.03 00:50

    im so new with this…. where should i put this code? within the head tag?

  8. OMTC said: 2010.02.04 19:48

    Works perfect!!!!!!!!!!! Thanx so much!!!!!!!!!

  9. Luka said: 2010.02.12 11:36

    Hej, thank you very much for this code, it is simple and easy to install. Just it doesn’t work well in Opera. When scroll to the top of the page it breaks.

  10. Pleeboy said: 2010.02.24 03:33

    Thank you for this very compact and clean code.

    Question, if I want to scroll slower than ‘slow’ is there a solution?

    Thanks

  11. Blaise said: 2010.03.15 06:00

    Works a treat…

    Unfortunately, it seems to be conflicting with lightbox.
    Can’t get them both to work on the same page.

    I was so close! :(

    Is there a fix?

    Thanx

    - Blaise

  12. Timmy said: 2010.04.09 16:18

    Is there a way to do this within only a DIV element with an ID? I see the JS says “html,body” but what if I want to only scroll a section of my site within a Div tag??

  13. Robin said: 2010.04.10 08:25

    Thanks! This is just where i was looking for.
    And i think i’ll be running at the same problem with Blaise, anyone knows a solution.

    Keep up the good work.

  14. mladen said: 2010.04.13 11:24

    thanks, this is cool efect

  15. javi said: 2010.04.19 01:45

    Great job!, I was looking for this solution for month and I dont know how i got to this blog.
    Thanks to share!

  16. yavuz said: 2010.04.20 00:55

    god bless you,
    thanx so much

  17. keli said: 2010.05.21 23:44

    DUde! i\’ve been working on using other jquery plugins for hours and i couldn\’t get it to work, then i found your site and in two min i have it. THANK YOU.

    Is there anyway to have the window slide to the div but with a marign?

    I\’m having my window slide to an image header but i would like there to be a 50px margin above the header rather than right on top of it.

    Please let me know!

  18. Oyeme said: 2010.06.30 10:54

    Thanks man!
    U very helped me..!!

Your Comment