比较简单的实现”返回顶部”

设置CSS

更新:margin-left的值过大,导致内容挡住了按钮.已更新.
[具体样式可以参考我的.]

下面是CSS代码:

#returnTop { /* 默认样式 */
width:51px;
height:51px;
margin-top:220px;
margin-left:20px;/*原来:margin-left:200px;更新:此值尽量小一些,否则在一些小的屏幕上无法完整显示按钮*/
position:absolute;
position:fixed
}
.returnMout { /*移除后的样式*/
background:url(images/returntop.gif);
position:0px 0px;
position:absolute;
position:fixed
}
.returnMover { /*移到元素上的样式*/
width:51px;
height:51px;
background:url(images/returntop.gif);
position:absolute;
position:fixed;
background-position:-51px -51px
}

按钮图片

按钮图片
image-1912

JS部分

使用jQuery(1.10.*)版本,不过可以把下面的JS代码直接放到你的网站本身的JS里面.


$(window).scroll(function() {

var bt = $('#returnTop');

bt.removeClass("returnMover");

bt.addClass("returnMout");

var st = $(window).scrollTop();

if (st > 50) {

bt.show();

//
bt.mouseover(function(e) {

bt.removeClass("returnMout");

bt.addClass("returnMover");

});

bt.mouseout(function(e) {

bt.removeClass("returnMover");

bt.addClass("returnMout");

});

bt.click(

function() {

window.scroll(0, 0);

}

);

} else {

bt.hide();

}

});

返回顶部 效果图
image-1913

HTML元素

 

放在页面顶部,我放在底部没效果,不知道为什么.

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据