Javascript scrollTop

Question

I have this code:

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

But when executed it scrolls too much, how can I make it scroll by 30px less when there is no other element that I could use?

Thank you

Answer 1

Since you're scrolling to the .offset().top of the woocommerce-breadcrumb element, you can subtract some pixels from that offset.

Small example were there's a scroll button below the woocommerce-breadcrumb. When clicked, we'll scroll to the top of the element plus 200px, so eventually the scroll will stop 200 pixels below the top of the element.

$('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>