回到顶部

html

<div id="side-bar">  
    <a href="javascript:;" class="gotop" style="display:none;">
        <img src="images/top.png">
    </a>
</div>

css

#side-bar { 45px;height: 45px;position: fixed;right: 20px;bottom: 20px;z-index: 9999; }

js

$(function () {//文档加载
/*--return top js start--*/
var $goTop = $("#side-bar").find(".gotop");
$(window).scroll(function () { // .scroll()文档滚动

    if ($(window).scrollTop()> 100) {
        $goTop.fadeIn();
        }
    else {
        $goTop.fadeOut();
        }
    });
    $goTop.click(function () {
        $('html,body').animate({'scrollTop': 0}, 500);
    });
/*--return top js end--*/
});

回到顶部-- refine

 

.dn{display:none}

js中on（）绑定事件，

且addClass（）或removeClass（）: removeClass（'dn'）,即移除 dislpay:none,让其显示

$('html,body').animate({'scrollTop':0},500);//回到顶部

html 3个<a>

<div class="go-top dn" id="go-top">
    <a href="javascript:;" class="uc-2vm"></a>
   <div class="uc-2vm-pop dn">
      <h2 class="title-2wm">用微信扫一扫</h2>
      <div class="logo-2wm-box">
         <img src="images/weixin.jpg" alt="站长素材" width="240" height="240">
      </div>
   </div>
    <a href="http://www.lanrentuku.com/about/guestbook.html" target="_blank" class="feedback"></a>
    <a href="javascript:;" class="go"></a>
</div>

css

.dn{display: none;}
/* 返回顶部 */
.go-top{position: fixed;bottom: 40px;right: 20px;width: 46px;z-index: 999;}
.go-top a{display: block;width: 46px;height: 46px;margin-bottom: 10px;background-image: url(../images/go-top.png?);}
.go-top a:last-child{margin-bottom: 0;}
.go-top .go{background-position: 0 -150px;}
.go-top .go:hover{background-position: 0 -250px;}
.go-top .feedback{background-position: 0 -100px;}
.go-top .feedback:hover{background-position: 0 -300px;}
.go-top .uc-2vm{background-position: 0 0;}
.go-top .uc-2vm:hover{background-position: 0 -350px;}/*可以借鉴*/

.go-top .uc-2vm-pop{
position: absolute;right: 60px;top: -100px;
width: 240px;box-shadow: 0px 1px 4px rgba(0,0,0,.1);
background: #fff;
}
.go-top .uc-2vm-pop .title-2wm{font-size: 14px; margin: 10px 20px;}
.go-top .uc-2vm-pop .logo-2wm-box{position: relative;}

js

$(function(){
   $(window).on('scroll',function(){ //on()绑定事件
    var st = $(document).scrollTop();
    if( st>0 ){ //有滚动
        if( $('#main-container').length != 0  ){
            var w = $(window).width(),mw = $('#main-container').width();
            if( (w-mw)/2 > 70 )
               $('#go-top').css({'left':(w-mw)/2+mw+20});
            else{
               $('#go-top').css({'left':'auto'});
            }
         }
         $('#go-top').fadeIn(function(){ //借鉴
            $(this).removeClass('dn'); //removeClass dislpay:none,让其显示
         });
      }else{
         $('#go-top').fadeOut(function(){
 $(this).addClass('dn');
         });
      }  
   });
   $('#go-top .go').on('click',function(){
      $('html,body').animate({'scrollTop':0},500);//回到顶部
   });

   $('#go-top .uc-2vm').hover(function(){
      $('#go-top .uc-2vm-pop').removeClass('dn');
   },function(){
      $('#go-top .uc-2vm-pop').addClass('dn');
   });
});
</script>