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

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

 <!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. Java实现线性阈值模型(Linear Threshold Model)

    影响力传播的线性阈值模型: 网络中连接任意两个节点u,v之间的边都有权重,任意一个节点它的各个邻居节点的边的权重之和为1,即 N(v):neighbors of v. 网络中的节点分为已激活节点和未激 ...

  2. js抛物线动画——加入购物车动效

    参考文章:http://www.zhangxinxu.com/wordpress/2013/12/javascript-js-元素-抛物线-运动-动画/ parapola.js /*! * by zh ...

  3. C++11智能指针读书笔记；

    智能指针是一个类对象,而非一个指针对象. 原始指针:通过new建立的*指针 智能指针:通过智能指针关键字(unique_ptr, shared_ptr ,weak_ptr)建立的指针 它的一种通用实现 ...

  4. NetBeans建立跳过测试构建的快捷方式

    在项目浏览器中右键项目->属性,如图进行设置: 此后按下图即可运行自定义行为:

  5. A Complete List of .NET Open Source Developer Projects

    http://scottge.net/2015/07/08/a-complete-list-of-net-open-source-developer-projects/?utm_source=tuic ...

  6. 漫谈iOS程序的证书和签名机制

    接触iOS开发半年,曾经也被这个主题坑的摸不着头脑,也在淘宝上买过企业证书签名这些服务,有大神都做了一个全自动的发布打包(不过此大神现在不卖企业证书了),甚是羡慕和崇拜.于是,花了一点时间去研究了一下 ...

  7. [知识笔记]Java 基本数据类型的大小、取值范围、默认值

    数据类型 大小(字节) 范围 默认值 boolean 1/8(1bit) true/false false byte 1 -128~127 (-2^7~2^7-1) 0 short 2 -32768~ ...

  8. Oracle SqlDeveloper创建JOB

    步骤1: 步骤2: 步骤3:

  9. POJ 2718 Smallest Difference【DFS】

    题意: 就是说给你一些数,然后要求你使用这些数字组成2个数,然后求他们的差值最小. 思路: 我用的双重DFS做的,速度还比较快,其中有一个很重要的剪枝,若当前搜索的第二个数后面全部补零与第一个数所产生 ...

  10. 关于Charles抓取手机访问的Https请求

    准备工作 本次测试的Charles版本为3.9.1 · 首先在Charles中开启HTTP请求的远程监听. · 然后分别在手机和Mac上安装Charles的证书. 注意:证书一定要一致,否则抓取不到. ...