滚动条定位

最新推荐文章于 2024-03-25 16:19:22 发布

我是小妖怪逍遥又自在

最新推荐文章于 2024-03-25 16:19:22 发布

阅读量208

点赞数

本文链接：https://blog.csdn.net/qq_29648689/article/details/80255471

版权

<body>
<div id="scrollBody" style="position:absolute;top:0;bottom:0;left:0;right:0;overflow:scroll;height:300px;">
<div style="font-size:20px;height:100px;">
1
</div>
<div style="font-size:20px;height:100px;">
2
</div>
<div style="font-size:20px;height:100px;">
3
</div>
<div id="hahah"style="font-size:20px;height:100px;">
4
</div>
<div style="font-size:20px;height:100px;">
5
</div>
</div>
<div style="position:relative;top:350px;">
<button class="btn1" id="scrollToTop" onclick="scrollToTop">按钮1</button>
<button class="btn2"> 按钮2</button>
</div>
</body>
<script src="js/jquery.js"></script>
<script>

/*function scrollToTop(){
document.getElementById('scrollBody').scrollTop = 200;
}*/直接滚动

$(document).ready(function(){
$( ".btn2" ).click(function(){
alert( $( "#hahah" ).offset().top+"px" );
});
$( ".btn1" ).click(function(){
var scroll_offset = $("#hahah").offset().top;
$("#scrollBody").animate({
scrollTop : scroll_offset
}, 500);
});
});

</script>