Anchor Links & Smooth Scrolling HELP

dekiv
Shopify Partner
158 2 12

I am trying to create a more interactive website by having most content on the one page. When a user clicks on the service offered, to scroll down to that specific section. I have been reading about anchor links and smooth scrolling but still am quite lost as to how to set this up.

 

URL: https://simple-marketing-au.myshopify.com/?_ab=0&_bt=eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaEpJaVp6YVcxd2J...

 

Pass: theush

 

I am trying to make it so that when they click on a service it scrolls down to that section. Currently using columns section for the services and rich text for the sections I want it scrolled too. 

 

Want these sections so when clicked, scrolls down to their relevant information:

dekiv_0-1676472877771.png

 

Hoping someone call help me

Replies 3 (3)

BSS-Commerce
Shopify Expert
3477 461 515

Hi @dekiv 

Please follow these steps:

- Step 1: Themes => Edit Code:

view-20.png

- Step 2: Find the file "base.css" or "base.css.liquid" and copy the code below at the end of the file:

html {
  scroll-behavior: smooth;
}

I hope that this can help you solve the issue.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

dekiv
Shopify Partner
158 2 12

@BSS-Commerce Thanks!

 

Do you know how I can get it to keep the section in centre of screen regardless of screen size when it is scrolled to? This is what it looks like now but want each section to be centered in middle of screen:

 

dekiv_0-1676980524063.png

 

gnip
Visitor
1 0 0

Only solution that is simple and worked for me thank you!