How to create scroll to top of the page by jquery animate ?

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Today now in this post i will show you How to create scroll to top of the page by jquery animate. However we want the scrolling process also with animated effect. We need to follow bellow example. So from this post we can add a button for scrolling top also with animate effect. So most of website we can see with one button left side or right side for the scrolling top of the page. So, if we want to create on our site then we need to add the following jquery code:

Example

<style type="text/css">
    #toTopImg{
      position: fixed;
      bottom: 20px;
      left: 20px;
      cursor: pointer;
      display: none;
      z-index: 999999; 
      background: #5a5a5a none repeat scroll 0 0;
      display: block;
      padding: 12px 15px;
    }
</style>
<script type="text/javascript">
  $(document).ready(function(){
        $('body').append('<div id="toTopImg" style="display:none">Top</div>');
          $(window).scroll(function () {
              if ($(this).scrollTop() != 0) {
                  $('#toTopImg').fadeIn();
              } else {
                  $('#toTopImg').fadeOut();
              }
          }); 
      $('#toTopImg').click(function(){
          $("html, body").animate({ scrollTop: 0 }, 600);
          return false;
      });
  });
</script>

Read Also: PHP download file from url by using curl example

Thanks for read. I hope it help you. For more you can follow us onĀ facebook.

About code chef

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by code chef →