回到页面顶部的jquery代码

2016-02-22    编辑:kp12345     点击(

回到页面顶部的jquery代码

页面下滚后出现用于"回到页面顶部"按钮的效果, 感觉挺不错的, 所以自己也写了一个, 用jQuery写是再简单不过了. 下面就直接给出代码了

 .scroll-up {
  background: #dcdcdc url('up.png') no-repeat center center;
  width:48px !important;  /*for ff and other standard browser*/
  height:48px !important;
  _width: 58px;  /*for IE6 nonstandard box model*/
  _height: 58px;
  position: fixed;
  _position: absolute; /*for IE6 fixed bug*/
  opacity: .6;
     filter: Alpha(opacity=60); /*for IE opacity*/
  padding:5px;
  cursor: pointer;
  display: none;
 
  /*css教程3 property for ff chrome*/
  border-radius:5px;
  -webkit-transition-property: background-color, opacity;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: ease;
  
  -moz-transition-property: background-color;
  -moz-transition-duration: 1s;
  -moz-transition-timing-function: ease;
 }
 .scroll-up:hover {
  background-color:#B9B9B9;
  opacity: .8;
 }
 下面是jquery代码

  ;(function($) {
   $.scrollBtn = function(options) {
    var opts = $.extend({}, $.scrollBtn.defaults, options);

    var $scrollBtn = $('').css({
         bottom: opts.bottom + 'px',
         right: opts.right + 'px'
        }).addClass('scroll-up').attr('title', opts.title)
         .click(function() {
         $('html, body').animate({scrollTop: 0}, opts.duration);
        }).appendTo('body');
    
    // 绑定到window的scroll事件                 
    $(window).bind('scroll', function() {
     var scrollTop = $(document).scrollTop(),
      viewHeight = $(window).height();
     
     // 小于配置的显示范围 则fadeOut
     if(scrollTop <= opts.showScale) {
      
      if($scrollBtn.is(':visible'))
       $scrollBtn.fadeOut(500);
     
     // 大于配置的显示范围 则fadeIn
     } else {
     
      if($scrollBtn.is(':hidden'))
       $scrollBtn.fadeIn(500);
     }
     
     // 解决IE6下css中fixed没有效果的bug
     if(isIE6()) {
      var top = viewHeight + scrollTop - $scrollBtn.outerHeight() - opts.bottom;
      $scrollBtn.css('top', top + 'px');
     }
    });
    
    // 判断是否为IE6
    function isIE6() {
     if($.browser.msie) {
      if($.browser.version == '6.0') return true;
     }
    }
   };

   /**
    * -params
    *  -showScale: scroll down how much to show the scrollup button
    *  -right: to right of scrollable container
    *  -bottom: to bottom of scrollable container
    */
   $.scrollBtn.defaults = {  // 默认值
    showScale: 100,       // 超过100px 显示按钮
    right:10,            
    bottom:10,
    duration:200,         // 回到页面顶部的时间间隔
    title:'back to top'   // div的title属性
   }
  })(jQuery);
  
  $.scrollBtn({
   showScale: 200, //下滚200px后 显示按钮
   bottom:20, // 靠底部20px
   right:20   // 靠右部20px
  });