Clever Geek Handbook

Scroll up to an element without animation

HOw Can I scroll the top of an element without using animation ()? I googled but all answers with animate ().

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

I just want to instantly jump to the top of the element. In my case, animate () is not required.

+3


source to share


3 answers


Use . scrollTop ()



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

        
        
        
      

    
.dummy {
  height: 1200px;
}
      

        
        
        
      

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


+3


source


You can do this by simply passing in the anchor, pure HTML:

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


and you just add <a name="top"></a>

at the top of your site :)

+1


source


You get the same impact without jQuery 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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Run code


0


source






More articles:


All Articles