博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
监听页面滚动的事件
阅读量:7207 次
发布时间:2019-06-29

本文共 831 字,大约阅读时间需要 2 分钟。

hot3.png

```

<style type="text/css"> 

#top_div{ 
    position:fixed; 
    bottom:80px; 
    right:0; 
    display:none; 
</style> 

```

```

<script type="text/javascript"> 
window.onscroll = function(){ 
    var t = document.documentElement.scrollTop || document.body.scrollTop;  
    var top_div = document.getElementById( "top_div" ); 
    if( t >= 300 ) { 
        top_div.style.display = "inline"; 
    } else { 
        top_div.style.display = "none"; 
    } 
</script> 

```

```

<a name="top">顶部<a> 
<div id="top_div"><a href="#top">返回顶部</a></div> 
<br /> 
<br /> 
<div> 
这里尽量多些<br />以便页面出现滚动条,限于篇幅本文此处略去 
</div>

```

例子语法解释

在 style 标签中首先定义 top_div css 属性:position:fixed;display:none; 是关键
javascript 语句中,t 得到滚动条向下滚动的位置,|| 是为了更好兼容性考虑
当滚动超过 300 (像素)时,将 top_div css display 属性设置为显示(inline),反之则隐藏(none)
必须设定 DOCTYPE 类型,在 IE 中才能利用 document.documentElement 来取得窗口的宽度及高度

转载于:https://my.oschina.net/swmhxhs/blog/725592

你可能感兴趣的文章
Linux shell中运行命令后加上字符“&”的作用
查看>>
MySQL存储引擎对比
查看>>
[Android Pro] AsyncTaskLoader vs AsyncTask
查看>>
[Linux] du-查看文件夹大小-并按大小进行排序
查看>>
转:numpy数据集练习——鸢尾花数据集
查看>>
把wcf服务,改成restful方式,以及吐槽
查看>>
SpatiaLite 各版本数据库差异
查看>>
Python变量和数据类型
查看>>
HTML(二)选择器
查看>>
C++ 类模板的使用
查看>>
AJAX编程-封装ajax工具函数
查看>>
Common Lisp学习笔记(九)
查看>>
一只菜鸡的话
查看>>
变量声明和定义的区别
查看>>
python之路之课后作业
查看>>
p4475 巧克力王国
查看>>
js中的Attribute
查看>>
Mysql的一些常用命令
查看>>
蓝桥杯:基础练习 闰年判断
查看>>
LeetCode-82-Remove Duplicates from Sorted List II
查看>>