简单的JQuery top返回顶部

一个最简单的JQuery Top返回的代码,Mark一下:

 

HTML如下:

 <div id="backtop">
     <a href="javascript:;">TOP</a>
 </div>

CSS样式:(随意修改样式)

#backtop{ 
    display: none; 
    position: fixed; 
    right: 50px; 
    bottom: 110px; 
}
#backtop a{ 
    display: block; 
    padding: 10px 5px; 
    background:#59b524; 
    color: #fff; 
    font-size: 16px; 
    font-weight: bold; 
}    
#backtop a:hover{ background:#439b11; }    

最关键的来了,JQuery如下:

$(function(){
    //当滚动条的位置大于距顶部0像素时,跳转链接出现,否则消失
     $(function () {        
         $(window).scroll(function(){            
            if ( $(window).scrollTop()>0){
                 $("#backtop").fadeIn(1200);
            }
            else
            {
                $("#backtop").fadeOut(1200);
            }
        });
        //当点击跳转链接后,回到页面顶部位置
         $("#backtop a").click(function(){
             $('body,html').animate({scrollTop:0},800);
            return false;
        });        
    });
});

OK。搞定!

 

posted @ 2015-08-20 15:36  雲淡颩淸  阅读(271)  评论(0编辑  收藏  举报