How can I create an anchor link without altering the URL?

Solved

How can I create an anchor link without altering the URL?

Gijsvl
Excursionist
16 0 4

Hi all,

 

I'm trying to create an anchor link on the homepage. 

It completely worked with the section id, and adding smooth scroll to the theme.liquid file.

 

The only problem I'm facing is the change in url when the button is being clicked. The section id appears in the url.

 

Is there a way to hide this?

 

Store: https://beestn.nl

Pw: 321

(The first button above the fold that says 'ontdekken')

 

Thanks so much!

Accepted Solution (1)

Zeel-prajapatii
Shopify Partner
138 32 27

This is an accepted solution.

Hey @Gijsvl please add the below javascript code to the js file. 

 

const appointmenbuttonlearnmore = document.querySelector('.content-box__buttons a');

appointmenbuttonlearnmore.addEventListener('click', () => {
    const appointmentFullElement = document.querySelector('.testimonials-template--20692094812491__ss_testimonial_8_wfX9yK');
    
    if (appointmentFullElement) {
        appointmentFullElement.scrollIntoView({ behavior: 'smooth' });
    }
});

 

Also remove href for the button on the banner. https://prnt.sc/oYa7LzhVyCAv 

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me

View solution in original post

Replies 2 (2)

Zeel-prajapatii
Shopify Partner
138 32 27

This is an accepted solution.

Hey @Gijsvl please add the below javascript code to the js file. 

 

const appointmenbuttonlearnmore = document.querySelector('.content-box__buttons a');

appointmenbuttonlearnmore.addEventListener('click', () => {
    const appointmentFullElement = document.querySelector('.testimonials-template--20692094812491__ss_testimonial_8_wfX9yK');
    
    if (appointmentFullElement) {
        appointmentFullElement.scrollIntoView({ behavior: 'smooth' });
    }
});

 

Also remove href for the button on the banner. https://prnt.sc/oYa7LzhVyCAv 

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
Gijsvl
Excursionist
16 0 4

Works perfectly, thanks so much!!!