jquery 判断滚动条到达了底部，怎么判断滚动条是否又到达的顶
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
.show{
width:360px;height:640px;overflow-x:hidden;overflow-y:auto;margin: 50px auto;border: 2px solid pink;box-sizing: border-box;
}
.show div{
width: 100%;height: 500px;background-color: #E5EECC;font-size:48px;text-align:center;line-height:500px;
}
.show div:nth-child(2n){
background-color: #E8DFC4;
}
</style>
</head>
<body>
<div class="show">
<div>1</div><div>2</div>
<div>3</div><div>4</div>
</div>
<button>判断滚动条位置</button><p></p>
</body>
<script type="text/javascript">
$(function(){
//拉动滚动条的时候判断位置
// $('.show').scroll(function(){
// if( $(this).scrollTop()==0 ){
// $('p').text('滚动条已到达顶部');
// }else if( $(this).scrollTop()+$(this).height() == $(this)[0].scrollHeight ){
// $('p').text('滚动条已到达底部');
// }else{
// $('p').text('');
// }
// });
//直接判断
$('button').click(function(){
if( $('.show').scrollTop()==0 ){
$('p').text('滚动条已到达顶部');
}else if( $('.show').scrollTop()+$('.show').height() == $('.show')[0].scrollHeight ){
$('p').text('滚动条已到达底部');
}else{
$('p').text('');
}
});
});
</script>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
$(".aa").scrollTop()可以获得滚动条距离顶部的位置
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
$(document).scrollTop() 获取垂直滚动的距离 即当前滚动的地方的窗口顶端到整个页面顶端的距离
$(document).scrollLeft() 这是获取水平滚动条的距离
看明白了吗？？
你要获取顶端 只需要获取到scrollTop()==0的时候 就是顶端了
要获取底端 只要获取scrollTop()>=$(document).height()-$(window).height() 就可以知道已经滚动到底端了
$(document).height() //是获取整个页面的高度
$(window).height() //是获取当前 也就是你浏览器所能看到的页面的那部分的高度 这个大小在你缩放浏览器窗口大小时 会改变 与document是不一样的 根据英文应该也能理解吧
其实你可以自己做个实验就知道了
$(document).scroll(function(){
$("#lb").text($(document).scrollTop());
})
<span id="lb" style="top:100px;left:100px;position:fixed;"></span><!--一个固定的span标记 滚动时方便查看-->
$(document).scrollLeft() 这是获取水平滚动条的距离
看明白了吗？？
你要获取顶端 只需要获取到scrollTop()==0的时候 就是顶端了
要获取底端 只要获取scrollTop()>=$(document).height()-$(window).height() 就可以知道已经滚动到底端了
$(document).height() //是获取整个页面的高度
$(window).height() //是获取当前 也就是你浏览器所能看到的页面的那部分的高度 这个大小在你缩放浏览器窗口大小时 会改变 与document是不一样的 根据英文应该也能理解吧
其实你可以自己做个实验就知道了
$(document).scroll(function(){
$("#lb").text($(document).scrollTop());
})
<span id="lb" style="top:100px;left:100px;position:fixed;"></span><!--一个固定的span标记 滚动时方便查看-->
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你在文档的滚动事件中判断即可：
$(window).scroll(function(){
checkIt($(document).scrollTop());
})
function checkIt(n){
return n !== 0 ? false : true;
}
$(window).scroll(function(){
checkIt($(document).scrollTop());
})
function checkIt(n){
return n !== 0 ? false : true;
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
