很多网站上都有返回顶部的效果, 主要有如下几种解决方案.
1, 纯 JS, 无动画版本
- Windows.scrollTo(x-coord, y-coord);
- Windows.scrollTo(0,0);
2, 纯 JS, 带动画版本
生硬版:
- var scrollToTop = Windows.setInterval(function() {
- var pos = Windows.pageYOffset;
- if ( pos> 0 ) {
- Windows.scrollTo( 0, pos - 20 ); // how far to scroll on each step
- } else {
- Windows.clearInterval( scrollToTop );
- }
- }, 16); // how fast to scroll (this equals roughly 60 fps)
流畅版:
- (function smoothscroll(){
- var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
- if (currentScroll> 0) {
- Windows.requestAnimationFrame(smoothscroll);
- Windows.scrollTo (0,currentScroll - (currentScroll/5));
- }
- })();
3,jQuery, 带动画版本
首先需要在顶部添加如下 html 元素:
<span style="font-size:14px"><p id="back-to-top"><a href="#top"><span></span > 返回顶部 </a></p></span>
其中 a 标签指向锚点 top, 可以在顶部防止一个 < a name="top"></a > 的锚点, 这样在浏览器不支持 JS 时也可以实现返回顶部的效果了.
要想让返回顶部的图片显示在右侧, 还需要一些 CSS 样式, 如下:
- p#back-to-top{
- position:fixed;
- display:none;
- bottom:100px;
- right:80px;
- }
- p#back-to-top a{
- text-align:center;
- text-decoration:none;
- color:#d1d1d1;
- display:block;
- width:64px;
- /* 使用 CSS3 中的 transition 属性给跳转链接中的文字添加渐变效果 */
- -moz-transition:color 1s;
- -webkit-transition:color 1s;
- -o-transition:color 1s;
- }
- p#back-to-top a:hover{
- color:#979797;
- }
- p#back-to-top a span{
- background:transparent url(/static/imgs/sprite.PNG?1202) no-repeat -25px -290px;
- border-radius:6px;
- display:block;
- height:64px;
- width:56px;
- margin-bottom:5px;
- /* 使用 CSS3 中的 transition 属性给 < span > 标签背景颜色添加渐变效果 */
- -moz-transition:background 1s;
- -webkit-transition:background 1s;
- -o-transition:background 1s;
- }
- #back-to-top a:hover span{
- background:transparent url(/static/imgs/sprite.PNG?1202) no-repeat -25px -290px;
- }
上面样式中的背景图片是雪碧图, 可以使用两个单独的返回顶部图片
有了 HTML 和样式, 我们还需要用 JS 控制返回顶部按钮, 在页面滚动时渐隐渐现返回顶部按钮.
- <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
- <script>
- $(function(){
- // 当滚动条的位置处于距顶部 100 像素以下时, 跳转链接出现, 否则消失
- $(function () {
- $(Windows).scroll(function(){
- if ($(Windows).scrollTop()>100){
- $("#back-to-top").fadeIn(1500);
- }
- else
- {
- $("#back-to-top").fadeOut(1500);
- }
- });
- // 当点击跳转链接后, 回到页面顶部位置
- $("#back-to-top").click(function(){
- //$('body,html').animate({scrollTop:0},1000);
- if ($('html').scrollTop()) {
- $('html').animate({ scrollTop: 0 }, 1000);
- return false;
- }
- $('body').animate({ scrollTop: 0 }, 1000);
- return false;
- });
- });
- });
- </script>
这样就可以了.
注意在载入页面后需要向下拖动一点滚动条才可以看到返回顶部的效果图.
来源: http://www.qdfuns.com/article/49499/9a1f49e61d79d468f92fe05a19276c9c.html