测试scrollTop用法

最新推荐文章于 2023-06-24 07:31:05 发布

dreamboycx

最新推荐文章于 2023-06-24 07:31:05 发布

阅读量449

点赞数

分类专栏：前端设计

本文链接：https://blog.csdn.net/dreamboycx/article/details/8530984

版权

前端设计专栏收录该内容

121 篇文章 1 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">

<head>

<title> 代码实例：测试scrollTop </title>

<meta http-equiv="content-type" content="text/html; charset=gb2312" />


<style type="text/css"> 
#top_div{ 
    position:fixed; 
    bottom:80px; 
    right:0; 
    display:none; 
} 
</style> 
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
 window.onscroll = function(){ 
    var t = document.documentElement.scrollTop || document.body.scrollTop;  
    var top_div = document.getElementById( "top_div" ); 
    if( t > 0 ) { 
        top_div.style.display = "block"; 
    } else { 
        top_div.style.display = "none"; 
    } 
}


$(function(){
$("#btnShow").click(function(){
var Top = document.documentElement.scrollTop
alert(Top);
});


}); 

</script>

</head>

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

</body>

</html>

dreamboycx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
测试scrollTop用法

代码实例：测试scrollTop #top_div{ position:fixed; bottom:80px; right:0; display:none; } window.onscroll = function(){ var t = document.documentElement.scrollTop || docu
复制链接

扫一扫