div产生的滚动条返回顶部
div产生的滚动条返回顶部
1.获取div
js:
let initialNode = document.getElementById("content")
react:
let initialNode = ReactDOM.findDOMNode(this.refs.content);
2.返回顶部
function backTop(){
window.setInterval(function() {
let pos = initialNode.scrollTop;
if ( pos > 0 ) {
initialNode.scrollTop= pos - 20 ;
} else {
window.clearInterval( scrollToTop );
}
}, 2);
}
3.调用 backTop
钻研不易,转载请注明出处。
div产生的滚动条返回顶部的更多相关文章
- 一款回到顶部的 jQuery 插件,支持 Div 中的滚动条回到顶部
前言 今天在网上搜索“回到顶部”的 jQuery 插件,网上有很多,但是大部分都不支持让 Div 中的滚动条回到顶部.于是乎,不放弃,自己参考 Github 上的一个 jQuery 插件,经过自己的修 ...
- 微信小程序滚动条返回顶部
scroll-view(可滚动视图区域): 使用竖向滚动时,需要给<scroll-view/>一个固定高度,通过 WXSS 设置 height,将scroll-y属性设置为true,将en ...
- js返回顶部效果
当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...
- jquery 实现 返回顶部
//Html代码: <div class="backToTop" title="返回顶部">返回顶部</div> //代码 //CS ...
- UWP 返回顶部按钮
返回顶部的按钮,like this 当用户下滑了一定的距离之后,通常是快滑倒底部的时候,出现返回顶部按钮,当用户向上快滑,滑到顶部的时候,返回顶部按钮自动消失. 在UWP中,用来滚动内容的控件是Scr ...
- scroll滚动到一定距离触发事件/返回顶部animate
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 在页面中有overflow-y:auto属性的div,当出现滚动条,点击返回顶部按钮,内容回这个div最顶部
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 返回顶部的功能 div固定在页面位置不变
1.你在网上搜索的时候,可能会搜索到div固定在页面上,不随滚动条滚动而滚动是用CSS写的,写法是position:fixed;bottom:0; 但是这个在iframe满地跑的页面实际开发中,有啥用 ...
- 转载:jQuery实现返回顶部功能
转自:http://blog.csdn.net/itmyhome1990/article/details/25340705 整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图 ...
随机推荐
- C++进阶--派生类的析构(虚析构函数,shared_ptr)
//############################################################################ /* 在多态虚基类中声明一个虚析构函数 * ...
- 搞懂webdriver的底层原理,才敢说自己懂自动化!
Selenium的历史1 selenium1.x:这个时候的selenium,使用的是JavaScript注入技术与浏览器打交道. 需要Selenium RC启动一个Server,将操作Web元素的A ...
- python模块: hashlib模块, configparse模块, logging模块,collections模块
一. hashlib模块 Python的hashlib提供了常见的摘要算法,如MD5,SHA1等等. 摘要算法又称哈希算法.散列算法.它通过一个函数,把任意长度的数据转换为一个长度固定的数据串(通常用 ...
- linux达人养成计划
一.命令基本格式: ls -1 详细列表 (ll) -h 人性化显示文件大小 -a 显示所有文件,包括隐藏文件 -d 查看目录属性 -i 显示iNode 二.文件处理命令 mkdir -p [目录名] ...
- Java中涉及线程和并发相关的内容
1:线程池 与每次需要时都创建线程相比,线程池可以降低创建线程的开销,这也是因为线程池在线程执行结束后进行的是回收操作,而不是真正的 销毁线程. 2:ReentrantLock ReentrantLo ...
- 主机、Docker时间与时区设置总结
最近在使用Docker容器时,部署java程序发现时间输出不对,在修改问题时总结如下. #date [-R] #查看主机时间 #timedatectl #查看主机时区 #tzselect ...
- ES6的学习记录
1.let命令: 基本用法: ES6新增了let命令,用来声明变量.用法类似于var,但是所声明的变量只在let命令所在的代码块内有效. { let a = 10; var b = 1; } cons ...
- angularjs路由传递参数
ui-sref.$state.go 的区别 ui-sref 一般使用在 <a>...</a>: $state.go('someState')一般使用在 controller里面 ...
- Centos7 开放80,3306端口解决办法
所有扯iptables的文章都是扯淡!!! centos 7 默认防火墙由firewalld来管理!关iptables屁事! 以开放80端口为例,执行以下命令: 开放80端口:firewall-cmd ...
- SpringBoot 实现前后端分离的跨域访问(CORS)
序言:跨域资源共享向来都是热门的需求,使用CORS可以帮助我们快速实现跨域访问,只需在服务端进行授权即可,无需在前端添加额外设置,比传统的JSONP跨域更安全和便捷. 一.基本介绍 简单来说,CORS ...