Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Javascript scrollTop – Woocommerce

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

Tags:

2

Answers


  1. 0

    Sometimes, vanilla JS does what you want. Just use scrollIntoView():

    jQuery(".woocommerce-breadcrumb").get(0).scrollIntoView();
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search