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 整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图 ...
随机推荐
- SET FMTONLY ON
有时候在执行SQL查询语句时,仅仅需要知道检索的元数据,而不是具体的数据行,可以设置SET FMTONLY ON. SET FMTONLY只将元数据返回给客户端. 语法SET FMTONLY { ON ...
- SQLServer数据库自增长标识列的更新修改操作
SQLServer数据库自增长标识列的更新修改操作方法在日常的sql server开发中,经常会用到Identity类型的标识列作为一个表结构的自增长编号.比如文章编号.记录序号等等.自增长的标识列的 ...
- SolrServer SolrRequest
SolrServer实现类 HttpSolrServer HttpSolrServer uses the Apache Commons HTTPClient to connect to solr. H ...
- Java-Runoob-高级教程-实例-数组:11. Java 实例 – 删除数组元素
ylbtech-Java-Runoob-高级教程-实例-数组:11. Java 实例 – 删除数组元素 1.返回顶部 1. Java 实例 - 删除数组元素 Java 实例 以下实例演示了如何使用 ...
- css中背景的应用
浏览器默认的字体大小是 font-size:16px; 谷歌最小的是10px 其他浏览器是12px 通配符选择器 * “*”的意思是代表所有的标签 回到正题 background 背景 他的几 ...
- centos7图形化界面安装后,意外出现Please make your choice from above ['q' to quit | 'c' to continue | 'r' to refresh]
安装完成centos7-GUI后出现如下提示: nitial setup of CentOS Linux (core) ) [x] Creat user ) [!] License informati ...
- IGMP Internet组管理协议 未完
一.IGMP Internet组管理协议 2.IGMP v2 3.IGMP三版本比较 4.1.1.4 IGMP v2 与 IGMP v1 的兼容 5.IGMP窃听(IGMP Snooping) IGM ...
- android Information:Gradle tasks [:dl_version:generateDebugSources, :dl_version:generateDebugAndroidTestSources导致无法实现Preview功能
Androidstudio 出现以下错误导致layout xml无法实现预览功能: Information:Gradle tasks [:dl_version:generateDebugSources ...
- 00001 - Linux 上的 Shebang 符号(#!)
使用Linux或者unix系统的同学可能都对#!这个符号并不陌生,但是你真的了解它吗? 本文了将给你简单介绍一下Shebang(”#!”)这个符号. 首先,这个符号(#!)的名称,叫做”Shebang ...
- Gini系数的原理
转载:https://blog.csdn.net/u010665216/article/details/78528261 首先,我们直接构造赛题结果:真实数据与预测数据: predictions = ...