Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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!
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025