我有以下代码:
jQuery('html, body').animate({ scrollTop: jQuery(".woocommerce-breadcrumb").offset().top }, 777);
但当执行时,它滚动太多,当没有其他元素可以使用时,我如何使它滚动减少30px?非常感谢。
4bbkushb1#
有时候,香草js会做你想做的事。只用 scrollIntoView() :
scrollIntoView()
jQuery(".woocommerce-breadcrumb").get(0).scrollIntoView();
ftf50wuq2#
因为你正在滚动到 .offset().top 的 woocommerce-breadcrumb 元素,可以从偏移量中减去一些像素。小的例子是在屏幕下方有一个滚动按钮 woocommerce-breadcrumb . 单击时,我们将滚动到元素顶部加上200px,因此最终滚动将停止在元素顶部下方200像素处。
.offset().top
woocommerce-breadcrumb
$('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>
2条答案
按热度按时间4bbkushb1#
有时候,香草js会做你想做的事。只用
scrollIntoView()
:ftf50wuq2#
因为你正在滚动到
.offset().top
的woocommerce-breadcrumb
元素,可以从偏移量中减去一些像素。小的例子是在屏幕下方有一个滚动按钮
woocommerce-breadcrumb
. 单击时,我们将滚动到元素顶部加上200px,因此最终滚动将停止在元素顶部下方200像素处。