JavaScrollTop

vsnjm48y  于 2021-09-13  发布在  Java
关注(0)|答案(2)|浏览(365)

我有以下代码:

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

但当执行时,它滚动太多,当没有其他元素可以使用时,我如何使它滚动减少30px?
非常感谢。

4bbkushb

4bbkushb1#

有时候,香草js会做你想做的事。只用 scrollIntoView() :

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

ftf50wuq2#

因为你正在滚动到 .offset().topwoocommerce-breadcrumb 元素,可以从偏移量中减去一些像素。
小的例子是在屏幕下方有一个滚动按钮 woocommerce-breadcrumb . 单击时,我们将滚动到元素顶部加上200px,因此最终滚动将停止在元素顶部下方200像素处。

  1. $('button').on('click', () => {
  2. jQuery('html, body').animate({
  3. scrollTop: jQuery(".woocommerce-breadcrumb").offset().top + 200
  4. }, 777);
  5. });
  1. .woocommerce-breadcrumb {
  2. height: 3000px;
  3. border: 1px solid red;
  4. }
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  2. <div class='woocommerce-breadcrumb'>Scroll down for the scroll-button</div>
  3. <button>Scroll</button>
展开查看全部

相关问题