Anchor link with smooth scroll - Impulse

Solved
Piano
Tourist
3 1 0

Hello, 

I would like to include in my Shopify website a smooth scroll from the main Nav menu to a specific section in the homepage.

I have managed to add the anchor link using the syntax /#shopify-section-[section_ID] in the Navigation area. However this does not scroll smoothly, instead it jumps to the section.

Can anyone help include a smooth scroll please?

Thanks in advance

 

0 Likes
TylerFSG
New Member
5 0 0
0 Likes
Piano
Tourist
3 1 0

Thanks very much for you answer!

I am not an expert of coding. Where shall I put that piece of code? 

0 Likes
TylerFSG
New Member
5 0 0

Can you share your site and a page with the anchor link you described so that I can take a closer look?

0 Likes
Piano
Tourist
3 1 0

This is an accepted solution.

Hi Tyler, thanks a lot for trying to help.

I have actually figured out a very simple way to do it. I will share it for people like me (not very proficient with coding).

This is valid only for scrolling to sections in the homepage.

There are basically 3 steps:

1) create a "Custom content" section, delete the image part and paste into the HTML area the following text: <div id="your-section-name"></div> . Make sure you disable the checkbox "add spacing above and below", your-section-name is the name you want to give to your section and to appear in the URL. Then place this created section immediately above the section you want to scroll TO. 

2) Go to the navigation, or whatever text you want to click on and scroll FROM. Use the syntax #your-section-name or in case you want to link from a different page, just insert your Shopify store URL in front of it.

3) Finally go to Edit Code - theme.css.liquid and paste the following code at the bottom of it: 

html {
scroll-behavior: smooth;
}

This shoud do the trick. I have used it in Impulse theme and works great!

0 Likes