1. toTop:function(){
  2. //toTop 滚动到顶部
  3. var currentPosition,timer;
  4. var speed=10;
  5. timer=setInterval(function(){
  6. currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
  7. currentPosition-=speed; //speed变量
  8. if(currentPosition>0){
  9. window.scrollTo(0,currentPosition);
  10. }else{
  11. window.scrollTo(0,0);
  12. clearInterval(timer);
  13. }
  14. },1);
  15. }

【注意】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. 关于for循环的一个小问题

    有如下程序: package com.lk.B; public class Test5 { public static void main(String[] args) { // TODO Auto- ...

  2. Linux cmus

    一.简介 CMus 是一款类似于MOC, Herrie 或 mp3blaster 的基于终端的音乐播放器,支持 Ogg Vorbis, FLAC, MP3, WAV, Musepack, WavPac ...

  3. 数据预处理 center&scale&box-cox

    http://stackoverflow.com/questions/33944129/python-library-for-data-scaling-centering-and-box-cox-tr ...

  4. 修改laravel中的pagination的样式

    运行如下命令,拷贝出pagination样式到public/vendor目录下, 然后在pagination实例上调用links(‘传路径’)方法 使用起来非常方便,同时也可以自定义样式

  5. css模块化思想(一)

    什么是css模块化思想?(what) 为了理解css模块化思想,我们首先了解下,什么是模块化,在百度百科上的解释是,在系统的结构中,模块是可组合.分解和更换的单元.模块化是一种 处理复杂系统分解成为更 ...

  6. IIS 身份验证

    IIS 支持以下身份验证模式: 匿名.如果不需要对客户端进行身份验证(或者使用自定义身份验证机制,如窗体身份验证),则可将 IIS 配置为允许匿名访问.在该事件中,IIS 创建一个 Windows 令 ...

  7. K860i的109升级需要的PinyinIME.apk和QuickSearchBox.apk两个文件

    联想K860i的109版本终于可以正常更新了,感谢下乐Phone之家的蚊子咬(http://bbs.lephone.cc/space-uid-6410.html)提供了关键的两个文件:PinyinIM ...

  8. 关于Gridview激发了未处理的事件“RowDeleting”错误的处理

    关于通过RowCommend事件执行删除操作时,提示 Gridview激发了未处理的事件“RowDeleting”错误的处理: <asp:TemplateField HeaderText=&qu ...

  9. DropDownList1.Items.Insert 与 DropDownList1.Items.Add 的区别

    DropDownList1.Items.Insert 与 DropDownList1.Items.Add 的区别 dropwdownist1.items.insert 是可以添加在制定索引处的 而dr ...

  10. Vue生命周期函数

    生命周期函数: 组件挂载,以及组件更新,组建销毁的时候出发的一系列方法. beforeCreate:实例创建之前 created:实例创建完成 beforeMount:模板编译之前 mounted:模 ...