控制按钮下拉到达一定距离时显示,返回顶层时消失,用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. Postman interceptor

    安装 下载地址: Postman Interceptor Chrome插件下载 1. 下载的是一个crx文件. 2. 在谷歌中打开: chrome://extensions/ 3. 拖动cfx文件到 ...

  2. Eclipse : 找不到或无法加载主类

    问题: 找不到或无法加载主类 解决思路: Step1: 去网上百度了下,基本上都说是环境变量的问题. 原因:环境变量设置有问题. 解决方法:重设环境变量 结果:当然问题没解决. Step2:再次百度, ...

  3. 什么是method swizzling

    其实跟字面的意思很相近.方法的调和.可以去修改oc中两个方法的调用. 这张图看起来会比较形象 20130718230430859.png 就是把两个实现调换具体的做法,首先,用Categroy建立自己 ...

  4. Web —— 小技巧集

    html中设置锚点定位3种方法(已知): 1. id 定位         <a href="#1F" name="1F">锚点1</a> ...

  5. XCODE 代码行统计

    find . -name "*.m" -or -name "*.h" -or -name "*.c" |xargs grep -v &quo ...

  6. 使用easy_install安装numpy、pandas、matplotlib及各种第三方模块

    倒腾了一晚上最终把题目中的环境配好了.以下简要说明.留作资料.并共享. 1.安装python. 在cmd中能进入python环境,通过把python路径加入到系统路径中就可以实现. 2.安装easy- ...

  7. PHP安全编程:跨站脚本攻击的防御(转)

    跨站脚本攻击是众所周知的攻击方式之一.所有平台上的Web应用都深受其扰,PHP应用也不例外. 所有有输入的应用都面临着风险.Webmail,论坛,留言本,甚至是Blog.事实上,大多数Web应用提供输 ...

  8. 第十四章 红黑树——C++代码实现

    红黑树的介绍 红黑树(Red-Black Tree,简称R-B Tree),它一种特殊的二叉查找树.红黑树是特殊的二叉查找树,意味着它满足二叉查找树的特征:任意一个节点所包含的键值,大于等于左孩子的键 ...

  9. Sql语句 不支持中文 国外数据库

    由于老美的不支持中文 SQL 语句第一:字段类型改为nvarchar,ntext 第二:强制转化 N update dbo.Role set rolename=N'普通用户' update dbo.T ...

  10. 简单html以及css的用法

    我将利用三天的时间来完成制作京东首页的静态页面效果,其中包含的内容有html以及css. 1.在开发进行之前,首先要配置开发环境:我们需要安装sublime  webstorm  vscode  Hb ...