Return top link use jQuery animate style

jQuery code

   1:  $(document).ready(function() { 

   2:      // hide #return_top first

   3:      $("#return_top").hide();

   4:   

   5:      // fade in #return_top

   6:      $(function() {

   7:          $(window).scroll(function() {

   8:              if ($(this).scrollTop() > 100) {

   9:                  $('#return_top').fadeIn();

  10:              } else {

  11:                  $('#return_top').fadeOut();

  12:              }

  13:          });

  14:   

  15:          // scroll body to 0px on click

  16:          $('#return_top a').click(function() {

  17:              $('body,html').animate({

  18:                  scrollTop: 0

  19:              }, 800);

  20:              return false;

  21:          });

  22:      });

  23:  });

html code: add before </body> section

   1:  <div id="return_top">

   2:          <a href="#top">&nbsp;</a>

   3:  </div>

CSS Style

   1:  /* return top link */

   2:  #return_top a

   3:  {

   4:      position: absolute;

   5:      position: fixed;

   6:      right: 15px;

   7:      bottom: 15px;

   8:      width: 18px;

   9:      height: 99px;

  10:      display: block;

  11:      background: url(../images/style/return_top.png) no-repeat left top;

  12:      z-index: 9888;

  13:  }

  14:  #return_top a:hover

  15:  {

  16:      background: url(../images/style/return_top.png) no-repeat right top;

  17:      text-decoration: none;

  18:  }

change your image or save here

Categories: jQuery

If You Enjoyed This Post Please Take 5 Seconds To Share It.