页面回顶

最新推荐文章于 2025-08-13 21:05:35 发布

weixin_33743880

最新推荐文章于 2025-08-13 21:05:35 发布

阅读量103

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/liliangel/p/5502015.html

web开发中经常有页面回顶的需求，近期使用，代码较简单，但是很实用！

html:

<a id="goTop" class="go-top" href="#header">
    <span class="go-top-inner"></span>
</a>

css:

.go-top {
    background: url("../img/xxx.png") no-repeat scroll left top transparent;
    bottom: 65px;
    color: #444444;
    display: none;
    height: 50px;
    margin-left: 510px;
    position: fixed;
    right: 160px;
    text-align: center;
    width: 50px;
}
.go-top:hover {
    background-position: -50px top;
}

图片：

js:

基于jquery

<!-- 页面回顶 -->
var gotop = $('#goTop');
gotop.click(function(){
　　$("html,body").animate({scrollTop:0},200);
　　return false;
});
$(window).scroll(function(){
    if(gotop.offset().top > window.innerHeight) 
　　　　gotop.show();
　  else 
　　　　gotop.hide();
});