js滚动条如何缓慢的回到顶部?
function top() {
let currentPosition, timer
timer = setInterval(function () {
currentPosition = document.documentElement.scrollTop || document.body.scrollTop
currentPosition -= 10
if (currentPosition > 0) {
window.scrollTo(0, currentPosition)
} else {
window.scrollTo(0, 0)
clearInterval(timer)
}
}, 1)
}
top()
js滚动条如何缓慢的回到顶部?的更多相关文章
- js+css实现点击回到顶部的效果(最低兼容至ie7)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- jq与js的写法,示例回到顶部div滚动显示隐藏
jq:var top_icon = $('.top_icon')[0]; id写法$('#id'),类写法$('.class'),标签写法$('div') 如:join=document.getEle ...
- 通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部(一)
回到顶部实例一 效果:默认隐藏导航栏,当滚动条滚到超过300px后导航栏和按钮出现,点击回到顶部按钮回到顶部,并隐藏导航栏和按钮(导航栏和按钮都是固定定位) <!doctype html> ...
- 通过js实现回到顶部功能
许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...
- [HTML/JS] JQuery 页面滚动回到顶部
HTML: <html> <body> <div id="back-to-top" style="cursor:pointer; displ ...
- JS实现回到顶部效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS回到顶部代码小记
HTML: <div id="goTop"> <a href="#top"><img src="~/Content/th ...
- js——页面回到顶部
很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子——页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享…… <!DOCTYPE html&g ...
- 一款回到顶部的 jQuery 插件,支持 Div 中的滚动条回到顶部
前言 今天在网上搜索“回到顶部”的 jQuery 插件,网上有很多,但是大部分都不支持让 Div 中的滚动条回到顶部.于是乎,不放弃,自己参考 Github 上的一个 jQuery 插件,经过自己的修 ...
随机推荐
- php的内核组成模块和运行原理
php总共包括3个模块: php内核,zend引擎,php扩展层. 内核: 用于处理请求,文件流,错误处理等相关处理 zend引擎: 将源文件转换成机器语言(实际上是字节码opCode),然后再zen ...
- 最大公约数gcd与最小公倍数lcm
最大公约数:gcd 最大公倍数:lcm gcd和lcm的性质:(我觉得主要是第三点性质) 若gcd (
- (转载)西门子PLC学习笔记十五-(数据块及数据访问方式)
一.数据块 数据块是在S7 CPU的存储器中定义的,用户可以定义多了数据块,但是CPU对数据块数量及数据总量是有限制的. 数据块与临时数据不同,当逻辑块执行结束或数据块关闭,数据块中的数据是会保留住的 ...
- 项目Alpha冲刺——代码规范、冲刺任务与计划
作业要求 这个作业属于哪个课程 软件工程1916-W(福州大学) 这个作业要求在哪里 项目Alpha冲刺 团队名称 基于云的胜利冲锋队 项目名称 云评:高校学生成绩综合评估及可视化分析平台 这个作业的 ...
- 每日质量NPM包拖拽文件上传_react-dropzone
一.react-dropzone 官方定义: Simple HTML5-compliant drag'n'drop zone for files built with React.js. 理解: 一个 ...
- [转]xml解析工具的效率比较QDomDocument、TinyXml-2、RapidXml、PugiXml
转自:http://www.itdaan.com/blog/2017/02/20/301ad47832f4.html 由于windows环境下测试不稳定,博主选择在linux下进行的测试! Qt - ...
- leecode第一百四十二题(环形链表II)
/** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next; * ListNode ...
- 修改Anaconda中的Jupyter Notebook默认工作路径
这二天,安装了anaconda想更改jupyter的工作路径,在网上找了一下 方式1. 打开Windows的cmd,在cmd中输入jupyter notebook --generate-config如 ...
- Qt5模型/视图结构-视图(View)
实现自定义的View,可继承自QAbstractItemView类,对所需的纯虚函数进行重定义与实现,对于QAbstractItemView类中的纯虚函数,在子类中必须进行重定义,但不一定要实现,可根 ...
- JS 字符串两边截取空白的trim()方法的封装
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...