控制按钮下拉到达一定距离时显示,返回顶层时消失,用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. N - Is It A Tree?(判断环)

    题意,就是判断这点点是不是组成的一颗树,也就是判断是否有环,就是没看出来如果是森林怎么办,试一试吧,最可恶的还没有说有多少节点.....就是个坑 /////////////////////////// ...

  2. mybatis处理单表多表操作以及动态sql和批量操作

    一.单表操作 建立了相应的mapper映射接口类后,在src/main/resources目录下的自己建立的mapper文件夹下创建映射类 select操作:用select标签 属性id为映射接口的方 ...

  3. Hadoop入门--HDFS(单节点)配置和部署 (一)

    一 配置SSH 下载ssh服务端和客户端 sudo apt-get install openssh-server openssh-client 验证是否安装成功 ssh username@192.16 ...

  4. C++ 求阶乘 四种方法

    来总结下求阶乘的各种方法哈. 写在最前:①各个代码仅仅是提供了求阶乘的思路,以便在实际须要时再来编码,代码并不健壮!②各个程序都在1到10内測试正确. 代码一: #include<iostrea ...

  5. Web日程管理FullCalendar

    fullcalendar是一款jQuery日程管理控件,提供了丰富的属性设置和方法调用,官网下载地址http://fullcalendar.io/download,眼下最新版本号是2.3.2. 仅仅要 ...

  6. VIPServer VS LVS

    http://www.cnblogs.com/nanyangzp/p/5552725.html

  7. C#解leetcode 238. Product of Array Except Self

    Given an array of n integers where n > 1, nums, return an array output such that output[i] is equ ...

  8. dede当前位置各种写法

    方法一.Dedecms当前位置{dede:field name='position'/} 方法二.dede:field name='position' runphp='yes'}          $ ...

  9. 移动页面缩放方法之(一)控制meta法

    <!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta http-equiv="Con ...

  10. (转)php5中类的学习

    类的结构: 类的内部能可能有三种东西,就是常量(constant),属性(property)和方法(method),功能可以理解成类外部的常量,变量和函数.     复制代码代码如下: <?ph ...