Adding smooth scrolling to anchor links in shopify theme "Flow"

Store Design
1

Hi!

I’ve looked around alot in the forums for this, but not found any that can be applied to my theme which is “Flow”.

Link for reference:

https://themes.shopify.com/themes/flow/styles/queenstown?industry%5B%5D=food-and-drink&surface_detail=food-and-drink&surface_inter_position=1&surface_intra_position=2&surface_type=industry

So I already know how to create anchor links. But I guess I have to use some kind of animation code and add that to some CSS file in my theme. But not sure what file to add the code into.

Seen theme.css.liquid in some answers but I can find this file, and not anything that is fairly close to it.

To just explain how I have set my links up currently. I use this code:

And I put this in every file that i want to go to.

Then, in navigation, I just add the URL of my website and add “#Name_of_section_I_want_to_go_to” after it.

So if anyone have a solution to how I can animate my anchorlinks with smooth scrolling in this specific theme i’d be very grateful.

2

@Filiph2

can you try this code

https://codepen.io/BlueZeroStudios/pen/XzOvVo

3

Look really cool Ketan!

But how would I apply this to the menus at the top of my page though? Which acts as the anchorlinks to the respective section on the front page.

And I guess I only need the JS code?

What file would I need to add the codes to?

4

@Filiph2

your have set section as you like and add link and navigation menu