HOw can I scroll to top of an element without using animate()? I googled, but all answers are with animate().

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

I just want to instantly go to the top of an element. In my case, the animate() is not necessary.

HOw can I scroll to top of an element without using animate()? I googled, but all answers are with animate().

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

I just want to instantly go to the top of an element. In my case, the animate() is not necessary.

• javascript
• jquery

• 2 why don't you use just plain HTML (anchors)? – dpedoneze Commented Jul 31, 2015 at 3:10

3 Answers 3

Use .scrollTop()

$("#button").click(function() {
  $('html, body').scrollTop( $("#elementtoScrollToID").offset().top);
});

.dummy {
  height: 1200px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="button">Test</button>
<div class="dummy"></div>
<div id="elementtoScrollToID">elementtoScrollToID</div>

You can do it just passing an anchor, pure HTML:

<a href="#top">go to top</a>

and you just add an <a name="top"></a> on the top of your website :)

You achieve the same affect without jQuery by using Window.scroll()

document.getElementById("button").onclick = function() {
    window.scroll(0,document.getElementById("elementtoScrollToID").offsetTop);
};

<button id="button">Button</button>

<div id="elementtoScrollToID" style="margin: 800px 0;">
  Scroll to here...
</div>

<!-- jQuery -->
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>