JQuery滚动动画滚动到div的底部,而不是顶部,可以通过以下步骤实现:
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<div id="targetDiv">这是目标div</div>
$(document).ready(function(){
// 获取目标div的底部位置
var targetBottom = $('#targetDiv').offset().top + $('#targetDiv').outerHeight(true);
// 滚动到目标div的底部
$('html, body').animate({
scrollTop: targetBottom
}, 1000); // 1000表示动画的持续时间,单位为毫秒
});
在上述代码中,我们使用了$(document).ready()
来确保页面加载完成后再执行代码。$('#targetDiv').offset().top
获取了目标div相对于文档顶部的偏移量,$('#targetDiv').outerHeight(true)
获取了目标div的高度(包括内边距、边框和外边距)。然后,使用animate()
方法将页面滚动到目标div的底部位置。
这种滚动动画可以应用于各种场景,例如当用户点击一个按钮时,页面滚动到某个特定的div的底部。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云