【代码】

 <!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. VMware12版虚拟机怎么安装win7系统

    工具/原料   VMware workstation 12 windows7镜像ios系统文件 链接:http://pan.baidu.com/s/1c0YrDgG 密码:vna1 建立一个新的虚拟机 ...

  2. BZOJ1401 : Hexagon

    这题显然是一个最小斯坦纳树的模型,直接上模板即可,就是正六边形比较恶心. #include<cstdio> #include<cstring> #include<algo ...

  3. windows8 开发教程 教你制作 多点触控Helper可将任意容器内任意对象进行多点缩放

    http://blog.csdn.net/wangrenzhu2011/article/details/7732907 (转) 实现方法: 对Manipulation进行抽象化 使不同容器可共用多点缩 ...

  4. Java_获取当前月最后一天

    List<String> ms = DateUtils.getMonths(7,"yyyyMM"); SimpleDateFormat sdf = new Simple ...

  5. 参考XML操作类

    转载参考地址: http://blog.csdn.net/happy09li/article/details/7460521

  6. Spark RDD Operations（1）

    以上是对应的RDD的各中操作,相对于MaoReduce只有map.reduce两种操作,Spark针对RDD的操作则比较多 ************************************** ...

  7. php pdo分页

    <table width="95%" border="1" cellspacing="0" cellpadding="0&q ...

  8. Codeforeces 617E XOR and Favorite Number（莫队+小技巧）

    E. XOR and Favorite Number time limit per test 4 seconds memory limit per test 256 megabytes input s ...

  9. 18. 求交错序列前N项和

    求交错序列前N项和 #include <stdio.h> int main() { int numerator, denominator, flag, i, n; double item, ...

  10. 使用VirtualEnvWrapper隔离python项目的库依赖

    是什么 VirtualEnv用于在一台机器上创建多个独立的python运行环境,VirtualEnvWrapper为前者提供了一些便利的命令行上的封装. 为什么要用 - 隔离项目之间的第三方包依赖,如 ...