关于如何使用javascript监听滚动条滚动事件
在网页中,通常有一个通往网页顶部的锚点,现在我们就来实现它
Html代码:
<a id="scrollup" href="#top" style="position:fixed;z-index: 999;display: none;">^</a>
Css代码:
#scrollup{
background: #777;
color:#eee;
font-size: 40px;
text-align: center;
text-decoration: none;
bottom:65px;
right:20px;
overflow: hidden;
width:46px;
height:46px;
border:none;
}
以上就是箭头所指按钮的样式啦,接下是实现滚动条监听事件~
javascript代码:
<script type="text/javascript">
window.onscroll= function(){
//变量t是滚动条滚动时,距离顶部的距离
var t = document.documentElement.scrollTop||document.body.scrollTop;
var scrollup = document.getElementById('scrollup');
//当滚动到距离顶部200px时,返回顶部的锚点显示
if(t>=200){
scrollup.style.display="block";
}else{ //恢复正常
scrollup.style.display="none";
}
}
</script>
关于如何使用javascript监听滚动条滚动事件的更多相关文章
- js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写
js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写 一.总结 一句话总结:滚动事件scroll(),浏览器窗口调整监听resize(),思考好监听对象. 1.滚动事件scroll()的监听对象是 ...
- JavaScript监听滚动条的进度条
<style type="text/css"> *{ margin: 0; padding: 0; } .g-box{ width: 100%; height: 400 ...
- 监听table滚动事件,滚动到底部时加载数据
mounted() { this.$refs.scrollTable.addEventListener( 'scroll',(event) => { this.getDistance(event ...
- Qt实现小功能之列表无限加载(创意很不错:监听滚动条事件,到底部的时候再new QListWidgetItem)
概念介绍 无限加载与瀑布流的结合在Web前端开发中的效果非常新颖,对于网页内容具备较好的表现形式.无限加载并没有一次性将内容全部加载进来,而是通过监听滚动条事件来刷新内容的.当用户往下拖动滚动条或使用 ...
- js监听滚动条 回到顶端
效果:当出现滚动条,且滚动条出现移动时,把回到顶端按钮 显示出来:当滚动条回到顶部时,将回到顶端按钮隐藏. <script type="text/javascript"> ...
- react 监听页面滚动
html: // 如果使用typescript, 定义dom类型 private dom: HTMLDivElement | null // ReactJS中,对Div监听只需要绑定 onScroll ...
- bootstrap modal 监听滚动条事件
bootstrap modal 里面使用datetimepicker时间控件,滚动时,时间控件并不会隐藏,这是一个小bug,在组里改下,当滚动条滚动时,直接隐藏这个时间控件,$("#alar ...
- JavaScript监听手机物理返回键的两种解决方法
JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听. 有两个解决办法: 1.返回到指定的页面 pushHistory(); window.addEventList ...
- vue中监听页面滚动和监听某元素滚动
①监听页面滚动 在生命周期mounted中进行监听滚动: mounted () { window.addEventListener('scroll', this.scrollToTop) }, 在方法 ...
随机推荐
- 吴恩达-coursera-机器学习-week7
十二.支持向量机(Support Vector Machines) 12.1 优化目标 12.2 大边界的直观理解 12.3 数学背后的大边界分类(选修) 12.4 核函数1 12.5 核函数2 12 ...
- Tesseract OCR简单实用介绍
做字符识别,不能不了解google的Tesseract-OCR,但是如何在自己的工程中使用其API倒是语焉不详,官网上倒是很详尽地也很啰嗦地介绍如何重新编译生成适合自己平台的lib和dll,经过近些天 ...
- code.google.com/p/log4go 下载失败
用 glide 下载 goim 的依赖包时报错,提示: code.google.com/p/log4go 找不到,即下载失败 主要是 code.google.com 网站已关闭导致的, 有人把它 fo ...
- centos安装tomcat7
转自:http://www.cnblogs.com/sixiweb/archive/2012/11/26/2789458.html 安装tomcat7: tomcat7下载主页: http://tom ...
- .NET轻量级ORM组件Dapper修炼手册
一.摘要 1.1.为什么叫本次的分享课叫<修炼手册>? 阿笨希望本次的分享课中涉及覆盖的一些小技巧.小技能给您带来一些帮助.希望您在日后工作中把它作为一本实际技能手册进行储备,以备不时之需 ...
- How to update WPF browser application manifest and xbap file with ‘mage.exe’
老外参考文章1 老外参考文章2 I created a WPF browser application MyApp then published it by ClickOnce in VS2008. ...
- 基于设备树的TQ2440的中断(2)
下面以按键中断为例看看基于设备数的中断的用法: 设备树: tq2440_key { compatible = "tq2440,key"; interrupt-parent = &l ...
- how to use kvo with swift (怎样在swift中使用kvo)
- UITableView加载网络数据的优化
UITableView加载网络数据的优化 效果 源码 https://github.com/YouXianMing/Animations // // TableViewLoadDataControll ...
- libjpeg的问题
游戏项目是基于cocos2d-x开发的,但线上发现一个bug就是玩家在设置完自定义头像后直接闪退.凡是在设置该玩家头像的地方,游戏就直接闪退.最终定位到的问题是图片数据源有问题,我的机器是win7,图 ...