【代码】

 <!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. 如何把car中的模块导入adams/view中

    在你的adams安装目录下的acar文件夹下找到acar.cfg文件,将里面的 MDI_ACAR_PLUS_AVIEW 后面的no改成yes,在car中的tool下面就可以找到进入view环境的命令了 ...

  2. jQuery Event.delegateTarget 属性详解

    // 为id为element的元素中的所有span元素绑定click事件 $("#element").on( "click", "span" ...

  3. java截取图片部分尺寸

    package util; import java.awt.Rectangle; import java.awt.image.BufferedImage; import java.io.File; i ...

  4. placeholder在不同浏览器下的表现及兼容方法

    1.什么是placeholder?    placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或 ...

  5. OpenCV 3.0 VS2010 Configuration

    Add in the system Path: C:\opencv\build\x86\vc10\bin; Project->Project Property->Configuration ...

  6. C# 从数据库中删除，插入，修改 索引选中条目

    一.删除 1. ) { var currentSelectIndex = usrListView.SelectedIndex; var item = usrView[currentSelectInde ...

  7. php调用empty出现错误Can't use function return value in write context

    php调用empty出现错误Can't use function return value in write context 2012-10-28 09:33:22 | 11391次阅读 | 评论:0 ...

  8. DirectX基础学习系列2

    补充第一章矩阵内容 向量 1 3D空间向量,包含浮点数类型坐标 D3DXVECTOR-->D3DXVECTOR3 2向量的长度 D3DXVector3Length(const D3DXVECTO ...

  9. java--接口和抽象类

    接口将抽象类的概念更延伸了一步,完全禁止了所有的函数定义.且可以将多个接口合并到一起,但是不能继承多个类.

  10. 开班典礼-老师玩命的教,大家玩命的学,沉静,18K

    接下来的四个月决定我的命运,三年前决定现在,现在决定三年后.喜讯,双元安卓四期,1368$,到第二期仍然不成熟,打分意见多写, 孙健:15011386618 喊出你 的目标.自己监督不了自己,别人可能 ...