如何解决Javascript滚动顶部
我有这个代码:
jQuery('html,body').animate({
scrollTop: jQuery(".woocommerce-breadcrumb").offset().top
},777);
但是当执行它时滚动太多,如果没有其他我可以使用的元素,我怎样才能使它滚动少 30px?
谢谢
解决方法
有时,vanilla JS 会做您想做的事。只需使用scrollIntoView()
:
jQuery(".woocommerce-breadcrumb").get(0).scrollIntoView();
,
由于您滚动到 .offset().top
元素的 woocommerce-breadcrumb
,您可以从该偏移量中减去一些像素。
一个小例子,woocommerce-breadcrumb
下方有一个滚动按钮。单击时,我们将滚动到元素顶部加上 200 像素,因此最终滚动将在元素顶部下方 200 像素处停止。
$('button').on('click',() => {
jQuery('html,body').animate({
scrollTop: jQuery(".woocommerce-breadcrumb").offset().top + 200
},777);
});
.woocommerce-breadcrumb {
height: 3000px;
border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='woocommerce-breadcrumb'>Scroll down for the scroll-button</div>
<button>Scroll</button>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。