关于如何使用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) }, 在方法 ...
随机推荐
- group by 字符串合并 有关问题
group by 字符串合并 有关问题 group by 字符串合并 问题 如下表: TYPE NAME C123 张三 C189 李四 C123 王一 C123 丁丁 C189 刘某 查询出如下形式 ...
- phpexcel错误 You tried to set a sheet active by the out of bounds index: 1解决办法
$objPHPExcel->createSheet($k);
- Azure存储上传下载(断点续传)
最近有一个客户需要将文件系统(VM搭建)迁移到Azure存储上,对于Azure存储这里就不多做介绍,但是该客户由于网络原因下载文件的时候经常出现上传中断,所以想在Azure 存储上实现下载的断点续传. ...
- Java IO:同步、非堵塞式IO(NIO)
转载请注明出处:jiq•钦's technical Blog 引言 JDK1.4中引入了NIO,即New IO,目的在于提高IO速度.特别注意JavaNIO不全然是非堵塞式IO(No-Blocking ...
- discuz修改太阳,月亮,星星等级图标
想必大家都想修改一下默认的等级图标吧,刚才在论坛上看见很多大神的方法都是要修改文件的,不过为了安全起见需要事先备份好才改,这种方法是可行的,但可能有些新手站长不会修改,又或者改错了恢复不来,现在我教大 ...
- C#远程调用技术WebService修炼手册
一.课程介绍 一位伟大的讲师曾经说过一句话:事物存在即合理!意思就是说:任何存在的事物都有其存在的原因,存在的一切事物都可以找到其存在的理由,我们应当把焦点放在因果关联的本质上.所以在本次分享课开课之 ...
- 玩DNF开启NVIDIA独显的方法
管理员身份运行后,点下红圈圈里的X,打开驱动配置文件,在Profiles里输入DNF,打开配置文件 把do not display this profile in the control panel ...
- fdLocalSql使用方法
fdLocalSql使用方法 fdLocalSql可以对fdMemTable内存表进行SQL查询(可以对多个fdMemTable内存表进行联表查询哦),fdLocalSql使用SQLITE引擎,而FI ...
- C#编程(三十二)----------数组基础
数组 如果需要使用同一类型的多个对象,就可以使用数组.数组是一种数据结构,他可以包含同一类型的多个元素. 数组的声明 在声明数组时,应先定义数组中元素的类型,其后是一对方括号核一遍变量名.例如:生命一 ...
- C# String.split()用法小结
第一种方法 string s=abcdeabcdeabcde; string[] sArray=s.Split('c') ; foreach(string i in sArray) Console.W ...