【代码】

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>home</title>

 </head>

 <style>

 *{

     padding:0;

     margin:0;

 }

 .box{

     width:1190px;       /*只有设置了宽度才能设置居中效果*/

     margin:0 auto;        /*设置居中*/

 }

 #btn{

     display: none;        /*按钮默认不显示*/

     width:40px;

     height:40px;

     position:fixed;        /*设置为固定定位*/

     left:50%;

     margin-left:610px;

     bottom: 30px;

     background:url("btn.png") no-repeat 0 0;     /*通过sprite来设置背景*/

 }

 #btn:hover{

     background:url("btn.png") no-repeat 0 -39px;

 }

 </style>

 <body>

     <div class="box">

         <img src="img1.jpg" alt="">

     </div>

     <a id="btn" href="javascript:;"></a>

 </body>

 <script>

     // 当页面加载完成后执行

     window.onload = function(){

         var obtn = document.getElementById("btn");

         var clientHeight = document.documentElement.clientHeight;   //获取用户页面可视窗口的高度

         var timer = null;

         var isTop = true;

         //滚动条滚动时触发

         window.onscroll = function(){

             var osTop = document.documentElement.scrollTop || document.body.scrollTop;     //获取滚动条当前位置距离顶部的距离

             if(osTop >= clientHeight){    //当页面进入第二屏时显示按钮

                     obtn.style.display = "block";

                 }else{

                     obtn.style.display = "none";

                 }

             if(!isTop){                //若滚动条未到达顶部则继续执行定时器

                 clearInterval(timer);

             }

             isTop = false;

         }

         obtn.onclick = function(){

             timer = setInterval(function(){

                 var osTop = document.documentElement.scrollTop || document.body.scrollTop;

                 var ispeed = Math.floor(-osTop/6);        //使向上滚动呈现渐变效果

                 document.documentElement.scrollTop = document.body.scrollTop = (osTop+ispeed);

                 isTop = true;

                 if(soTop == 0){     //如果滚动条已经到达浏览器顶部则暂定滚动

                     clearInterval(timer);

                 }

             },30)

         }

     }

 </script>

 </html>

JS实现页面回到顶部效果的更多相关文章

  1. 页面滚动事件和利用JS实现回到顶部效果

    页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...

  2. js——页面回到顶部

    很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子——页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享…… <!DOCTYPE html&g ...

  3. JS实现回到顶部效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 用Javascript实现回到顶部效果

    用Javascript实现回到顶部效果 经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶 ...

  5. javascript 特效实现(2)——回到顶部效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jquery实现"跳到底部"，"回到顶部"效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jQuery写toTop(回到顶部)效果

    在通常的网站开发中,页面有时候会很长,尤其是一些电商网站,为了提高用户的体验效果,我们通常会增加一个回到顶部的按钮,这个按钮我们同城会使用fixed定位,将其定位在当前可视区域某一固定位置.这个效果用 ...

  8. 自写jquery网页回到顶部效果，渐隐图标，引用js文件就可以

    唔.进来开发需求,当网页内容草鸡多的时候,用户就须要有个button高速回到顶部,而不是自己去滚滑轮~ 原本以为比較难的说,由于上头要求所实用js来实现,哪个页面引用,哪个页面显示. 于是乎,本屌丝就 ...

  9. JS原生回到顶部效果

    // 回到顶部 onload = function () { var oBtnTop = document.getElementById('toTop'); var timer = null; oBt ...

随机推荐

  1. C#抽象类及其方法的学习

    在C#中使用关键字 abstract 来定义抽象类和抽象方法. 不能初始化的类被叫做抽象类,它们只提供部分实现,但是另一个类可以继承它并且能创建它们的实例. "一个包含一个或多个纯虚函数的类 ...

  2. ural 1283. Dwarf

    1283. Dwarf Time limit: 1.0 secondMemory limit: 64 MB Venus dwarfs are rather unpleasant creatures: ...

  3. bzoj1028 [JSOI2007]麻将

    1028: [JSOI2007]麻将 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 1337  Solved: 601[Submit][Status][ ...

  4. 【随笔】android开发的学习路线

    第一阶段:Java面向对象编程 1.Java基本数据类型与表达式,分支循环. 2.String和StringBuffer的使用.正则表达式. 3.面向对象的抽象,封装,继承,多态,类与对象,对象初始化 ...

  5. 分类 kNN

    #coding=utf-8 from numpy import * import operator from os import listdir import matplotlib import ma ...

  6. BZOJ3831 : [Poi2014]Little Bird

    设f[i]表示到i最少休息次数,f[i]=min(f[j]+(h[j]<=a[i])),i-k<=j<i,单调队列优化DP #include<cstdio> #defin ...

  7. CSS创建三角形（小三角）的几种方法

    你可以在很多地方看到三角形(小三角):tooltips提示框.下拉菜单.甚至在loading载入动画里.不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的. 有一些不同的方法来设计并 ...

  8. http://developer.51cto.com/art/200512/15883.htm

    http://developer.51cto.com/art/200512/15883.htm

  9. A Complete Guide to the <Picture> Element

    If you’ve ever struggled building responsive websites, this post is for you. It’s part of a series o ...

  10. TYVJ P1088 treat Label：鞭笞人的DP

    时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景 广东汕头聿怀初中 Train#2 Problem2 描述 给出长度为N的数列{A_i},每次可以从最左边或者最 ...