【代码】

 <!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. ural 1272. Non-Yekaterinburg Subway

    1272. Non-Yekaterinburg Subway Time limit: 1.0 secondMemory limit: 64 MB A little town started to co ...

  2. BZOJ4388 : JOI2012 invitation

    注意到这个过程实质就是prim算法求最大生成树的过程. 首先通过离散化+线段树将$A+B$个点缩为上下各$O(n)$个点. 设已加入集合为$S$,未加入集合为$T$. 建立两棵线段树,维护所有在$T$ ...

  3. HDU 1533 & KM模板

    题意 求二分图最小完备匹配. SOL 建个图那么方便的事情是吧...然后边权都是正的(好像根边权也没什么关系),既然要求最小那么把边权取个相反数跑个KM就好了.. CODE: /*========== ...

  4. 【BZOJ】1089: [SCOI2003]严格n元树（递推+高精度/fft）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1089 题意:求深度为d的n元树数目.(0<n<=32, 0<=d<=16) ...

  5. 【BZOJ】2330: [SCOI2011]糖果（差分约束+spfa）

    http://www.lydsy.com/JudgeOnline/problem.php?id=2330 差分约束运用了最短路中的三角形不等式,即d[v]<=d[u]+w(u, v),当然,最长 ...

  6. Linux压力测试工具

    1 http_load:http://www.oschina.net/p/http_load 命令行输入man http_load 或者 http_load -h可以看到工具的使用方式: 参数说明: ...

  7. Java 反射机制学习资料

    Java反射——引言 Java反射——Class对象 Java反射——构造函数 Java反射——字段 Java反射——方法 Java反射——Getter和Setter Java反射——私有字段和私有方 ...

  8. java第一节课

    1.安装 2.编写java程序 首先,新建一个文本文档:把后缀改成.java,然后起一个文件名,要是英文的,如:Hello. 然后,编辑,代码如下: class Hello { public stat ...

  9. [转] - C++程序启动过程

    先说编译.链接过程1.预编译展开宏2.为每一个.cxx源文件编译一个目标文件3.编译器合成这些目标文件成一个库文件,同时解析可以找到的符号引用4.连接器把目标的库文件和所需要的引用的静.动态链接库进行 ...

  10. Css - 黑魔法

    我们发现了一个新功能,现在你可以创建sticky块元素了.这和 fixed 块元素一样,但不同的是, sticky 块元素是不会遮挡另一个块元素的,最好看看demo 类似的功能实现还可以使用jquer ...