Image button hyperlink always redirects to the top of the current page (with or without link)

[MelaninMoney]

Hello!

We are currently developing a certain landing page where we have a specific section containing the product details and such located at the bottom of the page.

We wanted to make it in a way, that whenever users clicks on one of the button images placed within the page, they will auto scroll to the specific product section mentioned.

Here's what we've done so far:
1. We already created a custom section with an empty div element. That section is named "join-the-club"
2. So whenever we want an image button to scroll to that section, we call it by using <a href="#join-the-club"> ... </a>
3. But after testing, whenever the image button is clicked, it just scrolls upwards towards the top of the page (A blank hyperlink also behaves the same way).
4. We also tried adding target="_blank" so it will open a new tab, upon button click - it will open a new tab and that new tab auto scrolls to the target section successfully (Although it works, this is not what we want the users to see and experience).

What we want to achieve is by not using target="_blank" in order to make the auto-scroll to work and we only want the users to stay in the same page and eliminate the "auto-scroll to the top" behavior whenever the image button is clicked.

Thank you very much in advance!

Website link: https://shop.melaninmoney.com/products/melanin-millionaires-club
Demo: https://www.loom.com/share/04c6a4d5f7e54c28972536a5adbb13ae

[NomtechSolution]

1. Give the empty div element in the "join-the-club" section an id attribute. For example: <div id="join-the-club"></div>.

2. Remove the href attribute from your image button links or set it to href="#" to avoid the default scroll behavior.

3. Add a class or unique identifier to your image button elements to make them easier to target. For example: <a class="scroll-to-join" href="#">...</a>.

4. Add the following JavaScript code to your theme or custom JavaScript file:

document.addEventListener('DOMContentLoaded', function() {
  var scrollToJoinButtons = document.getElementsByClassName('scroll-to-join');
  
  // Iterate through each button and attach a click event listener
  Array.prototype.forEach.call(scrollToJoinButtons, function(button) {
    button.addEventListener('click', function(event) {
      event.preventDefault(); // Prevent the default scroll behavior

      var targetSection = document.getElementById('join-the-club');
      var offsetTop = targetSection.offsetTop;

      // Perform smooth scrolling animation
      window.scrollTo({
        top: offsetTop,
        behavior: 'smooth'
      });
    });
  });
});

[MelaninMoney]

Hi NomtechSolution,

Thank you for taking the time to give some solutions to our issue.

Upon checking further, I noticed someone might have created a custom JS code before containing the following:

$(".check_out").click(function() {
    $('html,body').animate({
        scrollTop: $("body").offset().top},
        'slow');

Almost all of our image button classes are using the .check_out class before. So this might actually be the reason why it auto scrolls to the top of the page upon clicking.

Although your solution would also be correct, we just refrain on using the .check_out class all throughout the landing page and used another class name instead. Doing this fixed all our image buttons in our landing page.

If I might have missed something, please let me know. For now, our issue has been fixed.

Thank you very much!