jQuery将div中滚动条滚动到指定位置使用scrollTop定位|三体教程
文章目录

jQuery将div中滚动条滚动到指定位置使用scrollTop定位

今天在做一个评论功能的时候,遇到一个问题。

评论功能是使用ajax无刷新的。

又因为评论框在评论内容的下面,当评论过多的时候,提交完成后页面还是在那个位置。

但并不想这样,需要提交完成后自动滚到最新评论处。

那么问题来了,要如何才能实现点击按钮滚动到指定位置呢?

测试了十多分钟,终于解决。

如下代码。

html代码<style>
#commentBox{width:500px;display:inline-block;border:1px #e6e6e6 solid;max-height:400px; overflow-x:hidden; overflow-y:auto; _height:expression(this.offsetHeight>=400px?"400px":this.offsetHeight+"px"); overflow:atuo; overflow-x:hidden; background:#ccc;}
</style>
<div style="height:500px;">
	请拖到滚动条到最下面,按钮在下面。
</div>
<div id="commentBox">
	<span style="height:900px;display:inline-block;">
    	这里面是评论区。
    </span>
</div>
<div style="height:500px;">
	这里是其他内容!
</div>
<input type="button" id="btn" value="点击" />
<script>
$("#btn").click(function(){
	var scrolltop=$("#commentBox")[0].scrollHeight;
	$("#commentBox").scrollTop(scrolltop);
})
</script>
亲自测试一下

上面代码实现的功能是,点击按钮会发表评论,然后自动滚到底部。

本文网址:http://www.santii.com/article/70.html


数据更新时间:2018-07-22