hi,欢迎访问本站!
当前位置: 首页Web前端正文

jquery页面滚动到底部的方法

墨初 Web前端 658阅读

在前端web中想要让页的滚动条滚动到页面的底部,可以使用jquery来实现。下面是具体的使用方法。

jq实现页面滚动到底部的方法

jquery中的scrollTop属性用于获取或设置匹配元素相对于滚动条顶部的偏移,也就是设置滚动条滚动的高度。

jquery中的scrollHeight属性则可以获取元素内容的总高度。

将元素滚动条的scrollTop属性设置为元素的scrollHeight获取的高度,就可以让滚动条滚动到页面的底部啦。

例:

以下示例代码,可以让页面的滚动条一直保持在页面的底部。

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<div class="div">
    这是元素的内容
</div>
<script>
$('.div').scrollTop($('.div')[0].scrollHeight);
</script>

例2:

平滑的将页面滚动条滚动到页面的底部。

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<div class="div">
    这是元素的内容
</div>
<button class="but">点击我</button>
<script>
$('.but').on('click',function(){
    $('.div').animate({scrollTop: $('.div')[0].scrollHeight}, 'slow');
});
</script>

以上就是jquery中将滚动条滚动条页面底部的方法,大家可以参考一下。

声明:无特别说明,转载请标明本文来源!
相关推荐