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

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

 <!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. 读《Android编程权威指南》

    因为去年双十二购买了一折的<Android 编程权威指南(第一版)>,在第二版出来后图灵社区给我推送了第二版的优惠码,激动之余就立马下单购买电子书,不得不说Big Nerd Ranch G ...

  2. 《jQuery知识点总结》（一）

    write less do more写更少的代码实现更多的功能DOM:document object model (文件对象模型)选择器(选择元素的对象或者节点)id 选择器 $("#id& ...

  3. WebView随学笔记

    对于WebView而言我们需要掌握的内容是: /** 学习目标:webView * 1).将WebView加入到应用中 * 2).使用WebView加载页面 * 3).获取网络访问 * 4).在Web ...

  4. jquery.extend

    经常在插件中看到jquery.extend 方法,最近在尝试写一些简单的插件,顺便研究一下这个方法. 原文:http://www.cnblogs.com/RascallySnake/archive/2 ...

  5. 从Eclipse 到Unity(Android)

    Eclipse 与Unity之间的交互有以下两种方式: 1.在Eclispe中编写好针对Andorid平台的功能,然后将其制作成库(Library)文件(jar)应用到Unity中; 其中Androi ...

  6. 如何在android studio 1.0 启动时设置代理【解决WARN - ateSettings.impl.UpdateChecker - Connection failed.】

    今天第一次用android studio,下了个比较新的1.0.1 linux版本,结果启动时老是出现以下错误: [ 6987] WARN - ateSettings.impl.UpdateCheck ...

  7. Python: with...as...

    with open(path, 'r') as f: Soup = BeautifulSoup(f.read(), 'lxml') titles = Soup.select('ul > li & ...

  8. java类加载器加载文件

    例子:采用配置文件加反射的方式创建ArrayList和HashSet的实例对象. //第一种方式:类加载器加载文件 InputStream ips = ReflectTest2.class.getCl ...

  9. Android Studio accelerator key（shortcut）& Basic knowledge

    shift + F6 重构(选文件,ok->下面的控制台,do refactor option + return 快速修复 Activity@Extra() Intent: @FragmentA ...

  10. AI与PS

    PS 提取边界的方法 http://jingyan.baidu.com/article/4665065864c41ff549e5f80d.html 镜面对称 http://jingyan.baidu. ...