当用户浏览的网页过于长的时候，用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部，不仅麻烦，而且用户体验也会很差。现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮，点击它可以使页面返回顶部，用户再也不用滚动滚轮了。下面我总结了集中常用的返回顶部的效果：

方法一（最简单，代码量最少，但是效果有些生硬）、代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>返回顶部</title>

     <style>

         #btn{width: 50px;height: 50px;background: gray;}

     </style>

 </head>

 <body>

 <div id="box">

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

 </div>

 <button id="btn">返回顶部</button>

 </body>

 <script>

     var btn = document.getElementById('btn');

     btn.onclick = function(){

91        window.scrollTo(0,0);// 在窗体中如果有滚动条，将横向滚动条移动到相对于窗体宽度为x个像素的位置，将纵向滚动条移动到相对于窗体高度为y个像素的位置(如果没有滚动条，页面不会发生任何变化)

92     }

 </script>

 </html>

方法二：代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>返回顶部</title>

     <style>

         #btn{width: 50px;height: 50px;background: gray;}

     </style>

 </head>

 <body>

 <div id="box">

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

 </div>

 <button id="btn">返回顶部</button>

 </body>

 <script>

     var btn = document.getElementById('btn');

     var scrollTop ;

     var timer = null;

     window.onscroll = function(){

         scrollTop = document.documentElement.scrollTop||document.body.scrollTop;//兼容性写法，并且在滚动事件内可以实时获得滚动条距顶部的距离

         //console.log(scrollTop)

         return scrollTop;

     }

     btn.onclick = function(){

         clearInterval(timer);

 //        var now = scrollTop;

 //        var speed = (0-now)/10;

 //        speed = speed>0?Math.ceil(speed):Math.floor(speed);

         timer = setInterval(function(){

             var now = scrollTop;

             var speed = (0-now)/10;

             speed = speed>0?Math.ceil(speed):Math.floor(speed);//这三步设置是定时器里面可以使速度动态变化，达到有缓冲的效果，如果房子定时器外面的话，返回顶部的速度是匀速的。

             if(scrollTop==0){

                 clearInterval(timer);

             }

                 document.documentElement.scrollTop =  scrollTop + speed;

                 document.body.scrollTop =  scrollTop + speed;

         },30)

     }

 </script>

 </html>

方法三（利用jQuery，代码量少，而且带有动画效果）：代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>返回顶部</title>

     <script src="jquery-1.4.min.js"></script>

     <style>

         #btn{width: 50px;height: 50px;background: gray;}

     </style>

 </head>

 <body>

 <div id="box">

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

     <p>111111111111111111</p>

 </div>

 <button id="btn">返回顶部</button>

 </body>

 <script>

     var btn = document.getElementById('btn');

 //    var scrollTop  = document.documentElement.scrollTop||document.body.scrollTop;//兼容性写法，并且在滚动事件内可以实时获得滚动条距顶部的距离 ;

     btn.onclick = function(){

        $('body,html').animate({scrollTop:0},300)

     }

 </script>

 </html>

以上总结若有错误，欢迎指正！

js返回顶部效果的更多相关文章

  1. JQuery 实现返回顶部效果

    首先要里了解一下几个知识 $(window).scrollTop() ---滚动条距顶部距离 fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的. fadeOut() 方法使用淡出效 ...

  2. jq-animate实现返回顶部效果

    jq-animate实现返回顶部效果: <!doctype html> <html lang="en"> <head> <meta cha ...

  3. JavaScript实现返回顶部效果

    仿淘宝回到顶部效果 需求:当滚动条到一定位置时侧边栏固定在某个位置,再往下滑动到某一位置时显示回到顶部按钮.点击按钮后页面会动态滑到顶部,速度由快到慢向上滑. 思路: 1.页面加载完毕才能执行js代码 ...

  4. js返回顶部封装 简洁

    js返回顶部封装 简洁: 加入html页面body最后面即可. <script> a(); function a() { $(function() { if ($(".j-to- ...

  5. WEB返回顶部效果

    1. PC端页面返回顶部效果 1 $( window ).scroll(function(){ 2 if( $( window ).scrollTop() > 500 ){ // 当顶部的滚动距 ...

  6. 原生JS返回顶部，带返回效果

    有些网站当滑到一定高度时右下角会有一个按钮,你只要一点就可以直接返回顶部了.那这个功能是怎么做到的呢.其实不算太难: 首先我们先在网页中创建一个按钮,上面写上返回顶部,把它的样式改成固定定位,之后想要 ...

  7. 原生js返回顶部（匀速、由快到慢）

    在项目中我们经常有需求要求页面滚动到一定位置时出现返回顶部按钮,点击即返回顶部. 方法一: 锚点,这是最简单的.(a标签的href属性等于一直要到达位置元素的id值) 方法二: js直接给页面根节点设 ...

  8. HTML页面实现返回顶部效果 go to top

    1.首先导入jQuery插件. 2.js代码: $(window).scroll(function () { if($(window).scrollTop()>=100) { $(". ...

  9. 简约的返回顶部效果（jQuery）

    博客建好也快一个月了,主题是在原有主题的基础上做的修改,喜欢这样的清新简约风格,为了更好的体验,以后也会经常做修改. 一般博客的文章都比较长,看到下面不能快速返回到顶部还真是不方便,今天自己动手写了一 ...

随机推荐

  1. c coroutine

    今天看了下云风c coroutine  代码 博客,发现 coroutine 实现原理其实还比较简单,就用户态栈切换,只需要几十行汇编,特别轻量级. 具体实现 1. 创建一个coroutine: 也就 ...

  2. pureftp 服务

    没啥图,不喜勿喷---_-   ftp(file transfer protocol)--文件传输协议 (a)官网:www.pureftpd.org (b)原理 让用户连接上一个远程计算机(运行FTP ...

  3. iOS10 远程推送服务器所需证书以及应用授权文件配置

    推送证书制作步骤(目的:导出服务器需要的p12证书) 第一步: 打开Mac系统的"钥匙串访问"-"证书助理"-"从证书颁发机构请求证书" 取 ...

  4. @rpath/libswiftCore.dylib问题

    dyld: Library not loaded: @rpath/libswiftCore.dylib  Referenced from: /private/var/containers/Bundle ...

  5. WPF 通过Border来画边框

    WPF有自己的表格控件DataGrid.ListBox等,如果只是简单的需求,可以通过Border控件来画边框. 比如我们需要给上面的控件加上边框. <Window x:Class=" ...

  6. 51nod1265(判断四个点是否共面)

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1265 题意:中文题诶- 思路:假设现有a, b, c, d四 ...

  7. ***CodeIgniter集成微信支付（转）

    微信支付Native扫码支付模式二之CodeIgniter集成篇  http://www.cnblogs.com/24la/p/wxpay-native-qrcode-codeigniter.html ...

  8. Delphi中ExtractFilePath、ParamStr以及更多文件/目录操作涉及的函数。附加对应的例子

    先介绍ExtractFilePath和ParamStr ParamStr 该函数的原型是:function paramstr(i: Integer): String; 对于任何的application ...

  9. [项目]WebService涉及到的部分核心代码

     前言: 博客园似乎不太喜欢设计模式的东西,一连写了几篇设计模式的东西,都没什么人气,也许是写的水平有些不够,另外设计模式属于内功,怎们都得修炼一下,否则,设计混乱,不成体系,对于大型项目来说,就会显 ...

  10. IIS与Apache共用80端口

    Windows server 2003服务器上安装有默认 IIS 6和Apache两个服务器,IIS运行的一个.net程序,apache运行php程序,现在想让它们同时都能通过80端口访问,设置起来还 ...