js+JQuery实现返回顶部功能

来源：互联网发布：同城送花知乎编辑：程序博客网时间：2024/05/18 03:27

1、纯js,无动画版本

window.scrollTo(0,0);

2、纯js，带动画版本

生硬版：

var scrollToTop = window.setInterval(function() {      var pos = window.pageYOffset;      if ( pos > 0 ) {          window.scrollTo( 0, pos - 20 ); // how far to scroll on each step      } else {          window.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) {           window.requestAnimationFrame(smoothscroll);           window.scrollTo (0,currentScroll - (currentScroll/5));      }  })();

3、jQuery,带动画版本

首先需要在顶部添加如下html元素：

<p id="back-to-top"><a href="#top">返回顶部</a></p>

其中a标签指向锚点top，可以在顶部防止一个<a name="top"></a>的锚点，这样在浏览器不支持js时也可以实现返回顶部的效果了。

要想让返回顶部的图片显示在右侧，还需要一些css样式，如下：

/*returnTop*/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;}

jquery代码：

<script>$(function(){        //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失        $(function () {            $(window).scroll(function(){                if ($(window).scrollTop()>100){                    $("#back-to-top").fadeIn(1500);                }                else                {                    $("#back-to-top").fadeOut(1500);                }            });             //当点击跳转链接后，回到页面顶部位置             $("#back-to-top").click(function(){                $('body,html').animate({scrollTop:0},1000);                return false;            });        });    });</script>

0 0