当网页页面上需要添加锚点回到顶部时,要判断当前页面的浏览情况,比如规定一个点,当它出现在可视范围内时,显式回到顶部的图标,否则,回到顶部的图标隐藏。
代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
window.onload = function(event)
{
window.onscroll = function(){
//获取div距离顶部的偏移量
var top = document.getElementById("secend").offsetTop;
//获取屏幕高度
var windowTop = window.innerHeight;
//屏幕卷去的高度
var scrollTops = document.body.scrollTop;
if((windowTop+scrollTops)>top)
{
alert("已经进入可视区");
}else
{
alert("并没有进入可视区");
}
}
}
</script>
</head>
<body>
<div id="div_text" style="height: 200px;width: 200px;background: red;float:right;">w</div>
<div id="first" style="height: 900px;width: 200px;background: green">q</div>
<div id="secend" style="height: 200px;width: 200px;background: red">w</div>
</div>
</body>
</html>