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

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

 <!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. iOS 创建一个可以点击并拖拽的Button

    HSCButton.h #import <UIKit/UIKit.h> @interface HSCButton : UIButton { CGPoint beginPoint; } @p ...

  2. 【mongo】聚合相关资料

    一个很好的博客:http://www.cnblogs.com/shanyou/p/3494854.html 官网:https://docs.mongodb.com/manual/reference/o ...

  3. visual studio 2015连接到MySql相关问题

    vs中使用服务器资源管理器连接到MySQL没有成功.按照网上提供的解决方法,相关插件已经安装: 1.控制面板中,MySQL Connector Net 6.9.9已经安装(原安装版本为6.9.8,后升 ...

  4. SortedList和HashTable

    都是集合类,C#中同属命名空间System.Collections,“用于处理和表现类似keyvalue的键值对,其中key通常可用来快速查找,同时key是区分大小写:value用于存储对应于key的 ...

  5. memcache入门笔记

    向memcached保存数据时可以指定期限(秒).不指定期限时,memcached按照LRU算法保存数据. 这三个方法的区别如下: 选项 说明 add 仅当存储空间中不存在键相同的数据时才保存 rep ...

  6. hdu 5384 Danganronpa

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=5384 思路:没学自动机时以为是道KMP然后就tle了好几把,AC自动机模板题 #include<cs ...

  7. JS string 截取

    subStubstring(a,b); a:开始索引 b:结束索引 subStr(c,d) c:开始索引 d:截取数量.

  8. 比较完整的WebView的用法

    WebView, WebChromeClient和WebViewClient加载网页基本用法 webview是android中的浏览器控件,在一些手机应用中常会用到b/s模式去开发应用,这时webvi ...

  9. 2 Unique Binary Search Trees II_Leetcode

    Given n, generate all structurally unique BST's (binary search trees) that store values 1...n. For e ...

  10. 【Android进阶学习】shape和selector的结合使用（转）

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://liangruijun.blog.51cto.com/3061169/732310 ...