控制按钮下拉到达一定距离时显示,返回顶层时消失,用JS中的延时定时器来模拟滚动条效果

<script type="text/javascript">
  window.onscroll=function(){
  //获取当前页面的滚动条纵坐标位置
    if(document.documentElement.scrollTop || document.body.scrollTop > 200){
      document.getElementById("top").style.display = "block";
      }else{
      document.getElementById("top").style.display = "none";
    }
  }
  function upScroll(){
    window.scrollBy(0,-80);//用scrollby来设定滚动条滑动的像素数
    var timerUp = setTimeout("upScroll()",50);//启动定时器
    var upFinish = document.documentElement.scrollTop || document.body.scrollTop;//获取页面高度
    if(upFinish == 0){
      clearTimeout(timerUp);//停止定时器
    }
  }
</script>

Javascript返回顶部的更多相关文章

  1. javascript返回顶部几种代码总结

    纯js代码 /** * 回到页面顶部 * @param acceleration 加速度 * @param time 时间间隔 (毫秒) **/ function goTop(acceleration ...

  2. javascript返回顶部插件+源码

    javascript插件->returnTop.js: /* ** 插件名称returnTop.js ** 调用返回头部单例参数说明 ** 调用方式:turn.init(ele,speed); ...

  3. JavaScript返回顶部特效

    样式: <style type="text/css"> /*返回顶部特效*/ a { border: none; text-decoration: none; outl ...

  4. 写一个JavaScript“返回顶部”功能

    在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮. 效果演示可以查看本页.如果页面有滚动高度,右下角就会有一个含有“返回顶部”字样的黑色背景半透明的小条条.点击这里“ ...

  5. javascript 返回顶部

    <style> #linGoTopBtn {    POSITION: fixed; TEXT-ALIGN: center; LINE-HEIGHT: 30px; WIDTH: 30px; ...

  6. 【JavaScript&jQuery】返回顶部

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. gotop(返回顶部)

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

  8. 使用Javascript实现返回顶部功能。

    为了提高网站的浏览体验及友好度,相信大部分网站需要一个返回顶部的按钮,如果使用传统的a标记,再做一个div加上链接的话,非常麻烦,不仅每个页面都需要添加,而且不能实现非常智能的效果及简化维护时间. 下 ...

  9. JavaScript之返回顶部

    为了弄这个Hexo,今天又是坐在电脑面前待了一天( ⊙ o ⊙ ),老是出问题,在百度上也试验了很多方法,还是没弄好,诶...身心疲惫甚是乏累啊~~~ 算了,这个Hexo先不弄,还是安分点吧,在Hex ...

随机推荐

  1. docs

    https://www.eucalyptus.com/docs/eucalyptus/3.4/index.html  [Eucalyptus PDF官方下载] http://aws.amazon.co ...

  2. JVM 调优

    JVM内存,由三个部分构成 年轻代+老年代+永久代: 需要调试的是年轻代和老年代 的参数: 先解释几个JVM参数: -XMx : 最大可用内存: -Xms:初始化内存: -xss:  线程栈 的大小: ...

  3. 开始我的 JNI 入门吧

    JNI (java native interface)   java本地开发接口(一句话 : 就是1个 adapter). JNI  是一个协议  -   是用来让   java代码和C,C++ 代码 ...

  4. [资源分享]神州数码 思科 UCS 虚拟化培训资料

    神州数码 思科 UCS 虚拟化培训资料   点击文件名下载 UCS统一计算平台=.pdf 云计算Demo实验教材_Nexus 5K2K实验.pdf 云计算数据中心架构与技术.pdf 云计算数据中心虚拟 ...

  5. vim note(4)

    :new 文件名.词尾 新文件. :e 文件名 打开文件. :w 文件名.txt 保存文件. :wq 保存并退出. :x 辍学.假设文件更改被保存 版权声明:本文博主原创文章,博客,未经同意不得转载.

  6. 警告"Local declaration of 'XXX' hides instance variable"原因

    Local declaration of 'XXX' hides instance variable   是因为本地变量名跟函数变量名同名 ,.在命名上要注意.....  

  7. Oracle sequence排序的使用

    最近公司的项目中好多用到了Seq排序的,所以网上找些记录一下吧. 通过以下直接查询出所有的seq列表: select * from user_sequences; 查询结果如下: 查询结果和创建的基本 ...

  8. Android(java)学习笔记226:服务(service)之为什么使用服务

    1.服务 service 长期在后台运行的进程,一般没有应用程序界面   2.进程线程和应用程序之间的关系 应用程序开启,系统启动一个Linux进程,所有的组件都是运行在同一个进程的同一个线程(mai ...

  9. Android MediaCodec 使用例子

    Android MediaCodec 使用例子 下面的例子是使用MediaCodec 录制到文件的例子. 1 public class AvcEncoder { private MediaCodec ...

  10. 转载:C#实现接口回调

    通常情况下,我们创建一个对象,并马上直接去使用它的方法.然而,在有些情况下,希望能在某个场景出现后或条件满足时才调用此对象的方法.回调就可以解决这个“延迟调用对象方法”的问题.这个被调用方法的对象称为 ...