下拉框实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a{
position: fixed;
left: 0px;
bottom: 0px;
}
.hide{
display: none; /*默认不出现返回顶部*/
}
</style>
</head>
<body>
<div style="height: 1500px; background-color: #B0E0E6; overflow: auto;"> <!--overflow: auto;表示当高度大于页面高度时，使用下拉框-->
<a class="a hide" onclick="gotop();">返回顶部</a>
<div style="height: 500px; background-color: aqua; overflow: auto;">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
</div>
<script src="jquery-2.2.4.js"></script>
<script>
function gotop(){
$(window).scrollTop(0); //下拉框和页面顶部的距离
}
window.onscroll = function(){ //window.onscroll 监听鼠标滑轮事件，(鼠标滑轮滚动时执行function())
if ($(window).scrollTop()>100){
$(‘a‘).removeClass(‘hide‘); //下拉框距顶部大于100，显示返回顶部按钮
}else {
$(‘a‘).addClass(‘hide‘);
}
}
</script>
</body>
</html>
position()与offset()：
position()表示子标签与父标签(左上角)的偏移距离。
offset()表示标签与页面或屏幕(左上角)的偏移距离。
时间： 2024-10-13 05:59:02