如何实现“返回顶部”的页面效果

转自：http://www.liaoxuefeng.com/article/0013738939371174a66d9fcf5094b1dbf28e9e9ccbf9d61000

在很多网站中，如果滚动到页面下方，会在右下角一个固定位置出现“返回顶部”的按钮，点一下浏览器滚动条就自动回到顶部了，今天研究了一下，实现的效果如图：

如何实现“返回顶部”的页面效果

首先必须感谢知乎，因为这个按钮的样式就是照抄他们的，纯CSS实现，无图片，我只改了颜色。

关于如何用CSS画三角形，参考纯CSS气泡效果一文。

首先，在body中添加“返回顶部”按钮：

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

重点是go-top的CSS定义：

div.go-top {
display: none;
opacity: 0.6;
z-index: 999999;
position: fixed;
bottom: 113px;
left: 90%;
margin-left: 40px;
border: 1px solid #a38a54;
width: 38px;
height: 38px;
background-color: #eddec2;
border-radius: 3px;
cursor: pointer;
}

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

div.go-top div.arrow {
position: absolute;
left: 10px;
top: -1px;
width: 0;
height: 0;
border: 9px solid transparent;
border-bottom-color: #cc3333;
}

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

使用fixed定位，让按钮始终出现在右下角，通过设定left:90%可以使按钮在右方出现，但又不会太紧贴滚动条。

按钮默认不可见，当滚动页面到一定高度后，按钮出现，这里用jQuery实现，代码相当简单：

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

当按下按钮时，有动画效果返回顶部。

秒客网

如何实现“返回顶部”的页面效果

相关文章