一个简易的“返回顶部”页面效果

参考的廖大神的实现方法：https://www.liaoxuefeng.com/article/0013738939371174a66d9fcf5094b1dbf28e9e9ccbf9d61000

当网页页面过长时，查看内容多有不便，因此大多数的网页都实现了一个“返回顶部”的功能按钮。

以下使用的是html+css+js实现的“返回顶部”功能。

1.在html页面中嵌入“返回顶部”的部件

<div class="go-top">
<div class="arrow"></div>
<div class="stick"></div>
</div>

2.css中定义该部件的形态

.go-top {
display: none;
opacity: 0.6;
z-index: 999999;
position: fixed;
bottom: 40px;
left: 92%;
margin-left: 40px;
border: 1px solid #a38a54;
width: 50px;
height: 50px;
background-color: #bfc092;
border-radius: 25px;
cursor: pointer;
}

.go-top:hover {
opacity: 1;
filter: alpha(opacity=100);
}

.go-top div.arrow {
position: absolute;
left: 15px;
top: 3px;
width: 0;
height: 0;
border: 9px solid transparent;
border-bottom-color: #0066cc;
}

.go-top div.stick {
position: absolute;
left: 20px;
top: 20px;
width: 8px;
height: 14px;
display: block;
background-color: #0066cc;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}

设置left:92%控制部件在整个页面靠右位置。

设置border-radius为width（height）的一半，让部件呈现为圆形。

3.js控制部件的show与hide

$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 600)
$('div.go-top').show();
else
$('div.go-top').hide();
});
$('div.go-top').click(function() {
$('html, body').animate({scrollTop: 0}, 1000);
});
});

当页面浏览到600px之后，跳出“返回顶部”部件。

并且设置点击之后1000ms返回顶部。

demo下载地址：http://download.csdn.net/detail/somehow1002/9912094