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

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

 <!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#在二维码中添加圆角logo

    public class QRCodeHelper { #region 合并用户QR图片和用户头像 /// <summary> /// 合并用户QR图片和用户头像 /// </sum ...

  2. EFUpdate

    using System; using System.Collections.Generic; using System.Configuration; using System.Data; using ...

  3. Glassfish在SpringMVC服务端接收请求时字符出现乱码的解决办法

    环境描述 前端:jsp 后端:SpringMVC Controller 尽管jsp页面已设置了pageEncoding: <%@page contentType="text/html& ...

  4. java多线程wait notify join

    wait notify 几个注意点: wait 与 notify/notifyAll 方法必须在同步代码块中使用,即要先对调用对象加锁. 当线程执行wait()时,会把当前的锁释放,然后让出CPU,进 ...

  5. Python之实用的IP地址处理模块IPy

    实用的IP地址处理模块IPy 在IP地址规划中,涉及到计算大量的IP地址,包括网段.网络掩码.广播地址.子网数.IP类型等 别担心,Ipy模块拯救你.Ipy模块可以很好的辅助我们高效的完成IP的规划工 ...

  6. 修改MySql 数据默认存储路径

    1. cmd进入控制台 net stop mysql 2.复制原来数据库目录到新目录 复制C:\ProgramData\MySQL\MySQL Server 5.5\中的data目录到 D:\Prog ...

  7. lattice 与 modelsim 仿真 笔记

    对于 lattice  Diamond 与 modelsim 的联合仿真,我总结了一句话,那就是—— 难者不会,会者不难.  也许刚开始 觉得 摸不着 头脑,但是 一旦学会 感觉还是很简单和直观的. ...

  8. js实现返回顶部功能的解决方案

    很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...

  9. opencv计算运行时间

    double Time = (double)cvGetTickCount();//  算法过程Time = (double)cvGetTickCount() - Time ; printf( &quo ...

  10. HTTrack 网站备份工具

    HTTrack可以克隆指定网站-把整个网站下载到本地.可以用在离线浏览上,免费的噢! 强大的Httrack类似于搜索引擎的爬虫,也可以用来收集信息.记得之前写过篇http://www.cnblogs. ...