转自：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);
});
});
当按下按钮时，有动画效果返回顶部。
今天的文章如何实现“返回顶部”的页面效果分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/24916.html
