Help with making ''scroll to top'' button move to specific section

Technical Q&A
, ,
1

Hey,

So I’ve had a scroll to top button for a while now and I’ve been thinking about making it so the button takes the visitor to a specific section of my landing page.

I’d like the button to basically end up right on the ‘‘price table’’ section rather than going all the way up.

I’ve attached a screenshot of where I’d like it to land.

Any help is greatly appreciated.

URL: jasaoslaj.com

pricetabl.png
pricetabl.png448×578 149 KB

2

Hi,

At theme.liquid or theme.liquid.liquid find the place where you want to add the button and add the following code

Scroll to Top

Do some basic styles using css

Use Jave script(listens for the scroll event) just before

document.addEventListener("DOMContentLoaded", function() {
    var scrollButton = document.querySelector('.scroll-to-top-button');
    var targetSection = document.getElementById('target-section');

    window.addEventListener('scroll', function() {
        if (window.scrollY > targetSection.offsetTop) {
            scrollButton.classList.add('show');
        } else {
            scrollButton.classList.remove('show');
        }
    });

    scrollButton.addEventListener('click', function(e) {
        e.preventDefault();
        window.scrollTo({
            top: targetSection.offsetTop,
            behavior: 'smooth'
        });
    });
});

replace ‘target-section’ with the actual ID

If you still need help you can contact us (details at signature)

3

You don’t really need JS for this unless I am misunderstanding the question.

All you need to do is link an anchor tag to another anchor tag like this:


 Scroll Up

When a user clicks on ‘Scroll Up’ the page will scroll to the a tag with the id of ‘new-position’

You may want to add scroll-behavior: smooth; to your css for smooth scroll.

4

Thanks for the reply,

What do you mean add the button? Its already added through an app. Just need a way for it to go to that specific section

5

Im pretty much using a button through an app, so adding it isn’t needed.

Do I put the section id where ‘‘new position’’ is?

Also where to put this code? In my theme.liquid im guessing?

6

If it’s through an app then yes, the section id would probably be where ‘new-position’ is. If the app setup requires an actual URL to be used, you can also link to a part of a page with a URL like this : www.example.com/#new-position where new-position is the ID of the element you want to scroll to.