Scroll Top of the page using Jquery

In this tutorial, I'll show you how to create 'Go Top' button which will send to the top of the page using Jquery.

Click Here for DEMO

First thing, we need HTML to create the button and some content so that we get vertical scrollbar and 'Go Top' button. Here is the code:

HTML
<div class="content">
   <h2>Scroll to Top of the page using Jquery</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium maxime consequatur tempore! Nisi dolore id ducimus quibusdam eius officia quae repellendus impedit assumenda iste, ipsam nobis, laudantium nulla laborum nam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quis necessitatibus odio mollitia minima ut iste aut explicabo quibusdam tenetur incidunt omnis velit fugiat nisi dolorum minus, sit harum dignissimos.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium maxime consequatur tempore! Nisi dolore id ducimus quibusdam eius officia quae repellendus impedit assumenda iste, ipsam nobis, laudantium nulla laborum nam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quis necessitatibus odio mollitia minima ut iste aut explicabo quibusdam tenetur incidunt omnis velit fugiat nisi dolorum minus, sit harum dignissimos.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium maxime consequatur tempore! Nisi dolore id ducimus quibusdam eius officia quae repellendus impedit assumenda iste, ipsam nobis, laudantium nulla laborum nam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quis necessitatibus odio mollitia minima ut iste aut explicabo quibusdam tenetur incidunt omnis velit fugiat nisi dolorum minus, sit harum dignissimos.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium maxime consequatur tempore! Nisi dolore id ducimus quibusdam eius officia quae repellendus impedit assumenda iste, ipsam nobis, laudantium nulla laborum nam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quis necessitatibus odio mollitia minima ut iste aut explicabo quibusdam tenetur incidunt omnis velit fugiat nisi dolorum minus, sit harum dignissimos.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium maxime consequatur tempore! Nisi dolore id ducimus quibusdam eius officia quae repellendus impedit assumenda iste, ipsam nobis, laudantium nulla laborum nam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quis necessitatibus odio mollitia minima ut iste aut explicabo quibusdam tenetur incidunt omnis velit fugiat nisi dolorum minus, sit harum dignissimos.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium maxime consequatur tempore! Nisi dolore id ducimus quibusdam eius officia quae repellendus impedit assumenda iste, ipsam nobis, laudantium nulla laborum nam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quis necessitatibus odio mollitia minima ut iste aut explicabo quibusdam tenetur incidunt omnis velit fugiat nisi dolorum minus, sit harum dignissimos.</p>
</div>
<a href="#" id="gotop">Go Top</a>

Then, we need CSS to style up the things. Here I use SCSS so I'll share you SCSS code.
SCSS
#gotop{
   @include hide-text;
   @include size(40px);
   position: fixed;
   right: 10px;
   bottom: 10px;
   background: $light-blue;
   border-radius: 5px;

   &:after{
      @include size(7px);
      content: '';
      border-style: solid;
      border-color: $white $white transparent transparent;
      border-width: 1px 1px 0 0;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -2px 0px 0 -4px;
      transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
   }
}

Finally, we need Jquery Code to make it work and move to the top of the page. So, here's the Jquery below.
Jquery
$(function(){
 $(window).scroll(function(){
  if($(this).scrollTop() > 200) {
   $('#gotop').show();
  } else {
   $('#gotop').hide();
  }
 });
 $('#gotop').on('click', function(){
  $('html, body').animate({
   scrollTop: 0
  }, '300');
  return false;
 });
});

I hope this is working well. If you have any thought or any new sharing, feel free to comment below.

Cheers!!

Share this

Related Posts