Scroll to position with jQuery

If you need to scroll to a specific location on the page this little custom jQuery function can help you out. This snippet will help you scroll to a particular section based on the element you choose.

Add this little snippet inside your scripts file.

$.fn.scrollView = function () {
  return this.each(function () {
    $('html, body').animate({
      scrollTop: $(this).offset().top
    }, 1000);

Add this (also in your scripts file) and modify it to be the element which you would like to scroll to.


This snippet calculates #your-elements‘s position and scrolls your browser window to it. The duration is set at 1 second.

You could use the above snippet it many ways. A very simple example would be to trigger the function inside a click event.

$('#your-link').click(function (event) {

Feel free to explore the demo or download the code.


Want to become a better web developer?

Join over 25,000 other developer & designers who get awesome links to the best news and articles each week delivered directly to their inbox.


  1. It would be nice if there was a demo of this to see how it works.

    • Hey Dan!

      Thanks for the idea!

      Here is a demo.

      If you are not familiar with GitHub, just download it via the ‘zip cloud icon’ and have a play around. When I get time I will try and clean it up.

      Hope that helps.

    • I’ve downloaded the zip file, then how to use it for my site?

  2. Thanks man it works for me excellent 🙂

  3. excellent script it helps me a lot thanks 🙂

  4. its a great one !! thanks a lot !! but i guess am facing a problem , that it didn’t work while am using chrome ( it worked correctly in the DEMO ) and it worked correctly when i used IE

    • I found that Chrome and safari have a problem in changing the attributes of the body and html tag. so i modified it by the following code.

      function goToByScroll(i) {
      // Scroll
      scrollTop: (document.body.clientHeight * i)

  5. Hi,

    Is there an existing way to modify your script to allow for an offset position that takes into account a fixed horizontal navigation bar for example?


    • I don’t have an answer for you, however I am looking for the same as you. I want to be able to smoothly scroll to any DOM object position. Example, imagine I have a grid of 40*40 images, on a very wide page (so, with horizontal scrollbar)… I want to create a function that would allow the page to smoothly move from my current position to the center of that specified DOM object. Any idea anybody? I can even pay for having that. I am developping a 2D game and I am looking forward to implement this functionnality for extra quality and feel.

  6. Excelente! Funciona muy bien! Gracias

  7. I used this as
    var $current = $(‘section.current’);
    $next = $;
    scrollTop: $next.offset().top},’slow’);
    but did’t work on firefox 29 (on chrome it was fine). Any help would be appreciated.

    • Hey Nipuna,

      I just tested the post snippet in firefox 29 and all worked perfectly.
      I hope you managed to fix your code.


  8. Given Script code is understandable but which is not working at themes.Can u Explain why its happening.

    • Hi Chaitanya,

      If you can elaborate a little more on your problem I might be able to help.


  9. I needed to wrap the first function after equal sign with parenthesis. Now works like a charm. Thanks!

  10. Works perfectly with boostrap 3.

  11. Hello!
    Great script thanks.
    How can I make it works with a sort of Waypoint:
    When #my-element is 75% visible Booom —> Scroll to position.
    Do you have a clue?

    Best regards,

  12. Dude! I just wasted 2 hours trying to figure out how to do this before coming across this post! THANKS!!!!!!

    • No worries Taneal!

      It has happened to me many times as well 🙂

  13. Thank you, man !
    That’s the kind of code I love: short, coincise and very easy to implement !

  14. Hi Jack great and helpful tutorial. I am using this , I think this is also simple
    $(document).ready(function(e) {
    var a = 400,
    t = 1200,
    l = 700,
    s = e(“.scrool-top”);
    e(window).scroll(function() {
    e(this).scrollTop() > a ? s.addClass(“scrool-is-visible”) : s.removeClass(“scrool-is-visible scrool-fade-out”), e(this).scrollTop() > t && s.addClass(“scrool-fade-out”)
    }), s.on(“click”, function(a) {
    a.preventDefault(), e(“body,html”).animate({
    scrollTop: 0
    }, l)

  15. Thank you very much for saving my time. i try to do it by self but it doesn’t works correctly because my function wrong focus section

  16. Thanks dude. You are just awesome.

  17. i just say… wow

  18. beautiful!!! amayzing, thank you!!

  19. test 2

This post currently has 26 responses. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply

Your email address will not be published. Required fields are marked *