How to Scroll to Top of Webpage With Animation Using Vanilla Javascript & jQuery Full Tutorial For Beginners

 

 

If you don’t need the change to animate then you don’t need to use any special plugins – I’d just use the native JavaScript window.scrollTo() method — passing in 0, 0 will scroll the page to the top left instantly.

window.scrollTo(xCoord, yCoord);

Parameters

  • xCoord is the pixel along the horizontal axis.
  • yCoord is the pixel along the vertical axis.

 

 

If you do want smooth scrolling, try something like this:

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop:  }, "slow");
  return false;
});

That will take any <a> tag whose href="#top" and make it smooth scroll to the top

READ  Build Zoom Clone Video Chat Web App in Node.js Express and Socket.io Using WebRTC and PeerJS Library

 

 

Try this to scroll on top

<script>
 $(document).ready(function(){
    $(window).scrollTop();
});
</script>

 

 

Better solution with smooth animation:

// this changes the scrolling behavior to "smooth"
window.scrollTo({ top: , behavior: 'smooth' });

 

You don’t need jQuery to do this. A standard HTML tag will suffice…

<div id="jump_to_me">
    blah blah blah
</div>

<a target="#jump_to_me">Click Here To Destroy The World!</a>

 

 

smooth scroll, pure javascript:

(function smoothscroll(){
    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > ) {
         window.requestAnimationFrame(smoothscroll);
         window.scrollTo (,currentScroll - (currentScroll/5));
    }
})();

 

<script>
$(function(){
   var scroll_pos=();          
   $('html, body').animate({scrollTop:(scroll_pos)}, '2000');
});
</script>

 

READ  jsPDF Tutorial to Add PNG and GIF Images Using Base64 Code with Transparency in PDF Documents in Browser Using Javascript Full Project For Beginners

 

var scrollToTop = window.setInterval(function() {
    var pos = window.pageYOffset;
    if ( pos >  ) {
        window.scrollTo( , pos - 20 ); // how far to scroll on each step
    } else {
        window.clearInterval( scrollToTop );
    }
}, 16); // how fast to scroll (this equals roughly 60 fps)

Leave a Reply