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

Technical Q&A
, ,

Topic summary

A developer is attempting to modify a “scroll to top” button from a third-party section app to navigate to a specific page section instead of scrolling all the way to the top.

Current Issue:

  • The button currently scrolls to the very top of the page
  • Goal is to make it scroll to a specific section ID
  • Multiple code edits have been attempted without success

Technical Details:

  • Using a section app with an addon for the scroll button
  • Code includes both HTML structure and JavaScript event listeners
  • The posted code appears corrupted or reversed in the latter portion, making it difficult to diagnose
  • Attempting to target a specific section using an ID selector

Status: The issue remains unresolved. The developer is seeking assistance, as their current modifications to the section folder code have not produced the desired behavior.

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
1

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!