Javascript 滚动顶部答案

【问题标题】：Javascript scrollTopJavascript 滚动顶部
【发布时间】：2021-10-02 13:35:54
【问题描述】：

我有这个代码：

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

但是当执行时滚动太多，当没有其他可以使用的元素时，如何使其滚动减少 30px？

谢谢

【问题讨论】：

你拥有的值加 30？
其中任何一个都需要几秒钟来尝试，而不是询问……我强烈建议在询问之前尝试一些事情并做一些研究。

标签： javascript jquery ajax offset scrolltop

【解决方案1】：

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

小例子是在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>

【讨论】：

【解决方案2】：

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

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

【讨论】：