toTop:function(){
//toTop 滚动到顶部
var currentPosition,timer;
var speed=10;
timer=setInterval(function(){
currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
currentPosition-=speed; //speed变量
if(currentPosition>0){
window.scrollTo(0,currentPosition);
}else{
window.scrollTo(0,0);
clearInterval(timer);
}
},1);
}

【注意】document.body.scrollTop的值一直是0的情况:

1.页面指定了DTD,即指定了DOCTYPE时,使用document.documentElement

2.页面没有DTD,即没指定DOCTYPE时,使用document.body

js实现点击按钮滚动条缓慢滚动到顶部的更多相关文章

  1. js实例--js滚动条缓慢滚动到顶部

    收集篇(已测)-- <html><head> <script type="text/javascript"> var currentPositi ...

  2. js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框

    转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...

  3. js实现点击按钮传值

    js实现点击按钮传值 page1源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...

  4. 使用js实现点击按钮下载文件

    有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 ...

  5. 原生 js 实现点击按钮复制文本

    最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理 ...

  6. JS实现点击按钮,下载文件

    PS:本文说的,并非如何用js创建流.创建文件.实现下载功能. 而是说的:你已知一个下载文件的后端接口,前端如何请求该接口,实现点击按钮.下载文件到本地.(可以是zip啦.excel啦都是一样) 有两 ...

  7. 原生JS 实现点击按钮创建元素

    要求: 点击按钮,随机生成一个20px-100px宽度正方形,随机颜色,随机位置,不能出可视区域外 思路:(1)创建按钮,为按钮添加事件侦听 (2)触发事件,创建一个元素 (3)设置元素样式,包括大小 ...

  8. iframe内点击a标签禁止滚动到顶部

    在iframe内加载的表中,操作下的按钮用a标签布局,但是会出现一个非常不好的体验,就是当页面有滚动条的时候,点击a标签,列表会自动滚动到顶部. 首先看我的a标签: <a href=" ...

  9. js实现点击按钮实现上一张下一张相册滚动效果

    /****判断图片是否构成滚动效果*/$(function(){    if($("#bar").find('img').size()*71<=$("#bar&qu ...

随机推荐

  1. POI技术

    1.excel左上角有绿色小图标说明单元格格式不匹配 2.模板中设置自动计算没效果,需要加上sheet.setForceFormulaRecalculation(true); FileInputStr ...

  2. linux安全关机脚本

    linux安全关机脚本 在断电4分钟后判断关键 目的:在断电以后服务器连接UPS,UPS最多只能支持5分钟也会没电,所以在这里做个判断,如果断电4分钟后,市电还没来就关机. 以下两个设备为两个下路由器 ...

  3. 运用alarm系统调用检测网络是否断开

    比如对于一个Server/Client程序,Client会每隔一定时间(比如TIME_OUT_CLIENT)会向Server发送“CheckConnect”信息,Server收到这个信息会调用回调函数 ...

  4. Maven——继承和聚合

    实际项目中,可能正要构建一个大型的系统,但又不想一遍又一遍的重复同样的依赖元素,这种情况是经常出现的.不过还好,maven提供了继承机制,项目可以通过parent元素使用继承,可以避免这种重复.当一个 ...

  5. Jmeter接口测试-获取所有任务API

    获取所有任务 GET /api/tasks 接口获取所有的任务,该接口需要鉴权. 注意,默认情况下鉴权是关闭的.请确保app.coffee中的app.use(express_jwt(secret: j ...

  6. Vim编码知识,乱码问题

    原文:http://demi-panda.com/2012/12/26/vim-encoding/ 在vim的初始学习阶段,乱码经常是困扰新手的一个比较烦躁的问题,本文试图阐述Vim的编码知识,及设置 ...

  7. (转)Asp.Net底层原理(三、Asp.Net请求响应过程)

    原文地址:http://www.cnblogs.com/liuhf939/archive/2013/09/16/3324753.html 在之前,我们写了自己的Asp.Net框架,对整个流程有了一个大 ...

  8. Densely Connected Convolutional Networks(緊密相連卷積網絡)

    - Dense blocks where each layer is connected to every other layer in feedforward fashion(緊密塊是指每一個層與每 ...

  9. python -Tkinter 实现一个小计算器功能

    文章来源:http://www.cnblogs.com/Skyyj/p/6618739.html 本代码是基于python 2.7的 如果是对于python3.X  则需要将 tkinter 改为Tk ...

  10. HTML5+CSS3网站设计教程 (张晓景,胡克) [iso]

    <HTML5+CSS3网站设计教程>系统地讲解了CSS的基础理论和实际运用技术,并结合多个案例讲解了采用CSS与层布局相结合制作网页的方法,在详细讲解各个案例的制作中,不仅介绍了CSS样式 ...