''Scroll To Top'' button not moving to specific section

''Scroll To Top'' button not moving to specific section

jasa11
Explorer
87 0 11

Hey,

 

So recently I've been trying to make my scroll to top button land on a specific section rather than simply going fully top.

 

I'm using a section app that also has an addon which allows you to use this button. Now I've tried editing the code but nothing seems to work.

 

Heres my current code that I tried using:

 

<div class="scroll-to-top-01">
    <span class="btn-scroll-01 btn-scroll-01-position btn-scroll-01-style">
      <svg viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
        <path fill="{{ section.settings.arrow_color }}" d="M52,84V21.656l21.457,21.456c1.561,1.562,4.095,1.562,5.656,0.001c1.562-1.562,1.562-4.096,0-5.658L50.829,9.172l0,0  c-0.186-0.186-0.391-0.352-0.609-0.498c-0.101-0.067-0.21-0.114-0.315-0.172c-0.124-0.066-0.242-0.142-0.373-0.195  c-0.135-0.057-0.275-0.089-0.415-0.129c-0.111-0.033-0.216-0.076-0.331-0.099C48.527,8.027,48.264,8,48.001,8l0,0  c-0.003,0-0.006,0.001-0.009,0.001c-0.259,0.001-0.519,0.027-0.774,0.078c-0.12,0.024-0.231,0.069-0.349,0.104  c-0.133,0.039-0.268,0.069-0.397,0.123c-0.139,0.058-0.265,0.136-0.396,0.208c-0.098,0.054-0.198,0.097-0.292,0.159  c-0.221,0.146-0.427,0.314-0.614,0.501L16.889,37.456c-1.562,1.562-1.562,4.095-0.001,5.657c1.562,1.562,4.094,1.562,5.658,0  L44,21.657V84c0,2.209,1.791,4,4,4S52,86.209,52,84z"></path>
      </svg>
    </span>
     <a href='https://www.jasaoslaj.com/#shopify-section-15d62b59-d08d-4ba2-823b-06fe5c10472f'>Scroll Up</a>
  </div>
  <a id='shopify-section-15d62b59-d08d-4ba2-823b-06fe5c10472f'></a> 
   
<script>
    (function () {
      window.addEventListener('DOMContentLoaded', () => {
        const scrollBtn01 = document.querySelector('.btn-scroll-01');
        const targetSection = document.querySelector('#shopify-section-15d62b59-d08d-4ba2-823b-06fe5c10472f'); 
        const btnVisibility = () => {
          if (window.scrollY > 400) {
            scrollBtn01.classList.add('scroll-01--show');
          } else {
            scrollBtn01.classList.remove('scroll-01--show');
          }
        };
        document.addEventListener('scroll', () => {
          btnVisibility();
        });
        scrollBtn01.addEventListener('click', () => {
          window.scrollTo({
            top: 0,
            behavior: 'smooth',
          });
        });
      });
    })();
  </script>

I'm simply editing inside the section folder of this button, but as I said, nothing seems to work. Any help would be appreciated!

 

URL: jasaoslaj.com

 

Thanks!

Replies 0 (0)