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

最新推荐文章于 2023-01-11 19:36:58 发布

liaozxbj

最新推荐文章于 2023-01-11 19:36:58 发布

阅读量324

点赞数

CC 4.0 BY-SA版权

文章标签： jquery

原文链接：http://www.liaoxuefeng.com/article/0013738939371174a66d9fcf5094b1dbf28e9e9ccbf9d61000

首先，在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); }); });

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

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