Javascript 滚动顶部

Question

我有这个代码：

    jQuery('html, body').animate({
        scrollTop: jQuery(".woocommerce-breadcrumb").offset().top
}, 777);

但是当执行时它滚动太多，当没有其他我可以使用的元素时，我怎样才能让它少滚动 30px？

谢谢

Answer 1

有时候，vanilla JS 会做你想做的事。只需使用 scrollIntoView():

jQuery(".woocommerce-breadcrumb").get(0).scrollIntoView();

Answer 2

由于您正在滚动到 woocommerce-breadcrumb 元素的 .offset().top，因此您可以从该偏移量中减去一些像素。

woocommerce-breadcrumb下方有一个滚动按钮的小例子。单击时，我们将滚动到元素顶部 plus 200px，因此最终滚动将停止在元素顶部下方 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>

Javascript 滚动顶部

Javascript scrollTop

javascript

jquery

ajax

offset

scrolltop