【代码】

 <!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. Java unicode中文编码转换和反转

    参考网址http://www.oschina.net/code/snippet_142385_4297 http://canofy.iteye.com/blog/718659 在java的很多配置文件 ...

  2. TYVJ P1075 硬币游戏 Label：dp

    背景 农民John的牛喜欢玩硬币,所以John就为它们发明了一个新的两人硬币游戏,叫做Xoinc. 描述 最初地面上有一堆n个硬币(5<=n<=2000),从上面数第i个硬币的价值为C_i ...

  3. 【POJ】3150 Cellular Automaton（矩阵乘法+特殊的技巧）

    http://poj.org/problem?id=3150 这题裸的矩阵很容易看出,假设d=1,n=5那么矩阵是这样的 1 1 0 0 1 1 1 1 0 0 0 1 1 1 0 0 0 1 1 1 ...

  4. Cite a Website in Paper 论文中引用网页的格式

    Template: 1.A. Author Surname, 'Title', Year Published, <http://Website-Url> (accessed 10 Octo ...

  5. spark Mllib SVM实例

    Mllib SVM实例 1.数据 数据格式为:标签, 特征1 特征2 特征3…… 0 128:51 129:159 130:253 131:159 132:50 155:48 156:238 157: ...

  6. hdu Line belt

    这道题是一道3分搜索的题.其实这种题很多时候都出现在高中的解析几何上,思路很简单,从图中可以看到,肯定在AB线段和CD线段上各存在一点x和y使得所花时间最少 因为AB和CD上的时间与x和y点的坐标都存 ...

  7. MySQL 5.7在线设置复制过滤

    很久没有更新博客了,主要是公司事情比较多,最近终于闲下来了.然而5.7也GA了,有许多新的特性,其中现在可以进行在线设置复制过滤了.但是还是得停复制,不过不用重启实例了.方便了DBA们进行临时性的调整 ...

  8. checking在浏览器为应用缓存查找更新时触发

    离线的Web应用,就是在设备不能上网的时候还能运行应用.html5把离线应用作为重点,主要是开发人员的心愿.离线应用的开发的步骤有:首先应该知道设备是否能够上网;然后应该还能访问一定的资源(如图像.C ...

  9. Js组件的一些写法【转】

    首先看下Prototype里的写法: var Class = { create: function() { return function() { this.init.apply(this, argu ...

  10. 利用poi开源jar包操作Excel时删除行内容与直接删除行的区别

    一般情况下,删除行时会面临两种情况:删除行内容但保留行位置.整行删除(删除后下方单元格上移).对应的删除方法分别是: void removeRow(Row row)//Remove a row fro ...