Make button scroll to top of page

[Viajey]

I have a button in the image with text element, and I'd like it to scroll the user to the top of the page when clicked. I used this code before, but it only worked in the customize section, not on the actual website.

<style>

      html {

          scroll-behavior: smooth;

      }

    </style>

    <script>

      document.addEventListener('DOMContentLoaded', function() {

          let buttonScrollTop = document.querySelector('.button[data-shopify-editor-block*="button_PfN8Qi"]');

          if(buttonScrollTop) {

              buttonScrollTop.addEventListener('click', function(e){

                  e.preventDefault();

                  document.body.scrollTop = 0;

                  document.documentElement.scrollTop = 0;

              });

          }

      });

[MaverickStudio]

Hey @Viajey ,

Welcome to the community!

Can you send over the link and the store password?

[Viajey]

For sure. The website is viajey.com and the password is abc123

[Dan-From-Ryviu]

Hi @Viajey 

Maybe you get an element of the editor, so it works only for the editor. Please check on live site and get correct element of button to make it work 

[Viajey]

This is what the element is on the live website. How would I add this to my code?

<a role="link" aria-disabled="true" class="button button--primary">
Buy Now
</a>

[Dan-From-Ryviu]

Could you please show me the code and indicate which section you would like to scroll to when the button is clicked?

[Viajey]

The elements are on this link, and the store password is abc123 

https://viajey.com/products/wrap-travel-pillow

The "Buy Now" button in the first image should be clicked to bring the user to the section in the second image.

[Dan-From-Ryviu · Accepted solution]

Simply add this value in the link of that button

#MainProduct-template--16290336473132__main

[Viajey]

it worked! Thank you!