Welcome to %s forums

<No. 1 Community for developers, by developers/>

Login Register

How to create Scroll to Top in just 2 minutes using jQuery?

Get support on JavaScript,jQuery, AJAX and other related technology.
Post Reply
admin
Site Admin
Posts: 45

How to create Scroll to Top in just 2 minutes using jQuery?

Post by admin » Thu Aug 22, 2019 11:05 pm

HTML:

Code: Select all

<a href="#" class="to-top">
Back to Top<
/a>
jQuery:

Code: Select all

$(document).ready(function() {
    $('.to-top').click(function() {
    $('html, body').animate({scrollTop: 0}, 300);
    })
});
CSS:

Code: Select all

.to-top {
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}
.to-top:hover {
  background-color: #555;
}
As you can see, when the 'to-top' link is clicked, the animation method is applied to the html and the body elements, using the scrollTop value, which scrolls the entire page back up to the top. The numerical value (in this case, 300) defines the speed at which it should take for the page to scroll back up to the top in milliseconds.

Post Reply