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

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

by Shahriar Sagor

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.

close

You may also like