How do I set up anchor links and smooth scrolling for a single page website?

[dekiv]

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=eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaEpJaVp6YVcxd2JHVXRiV0Z5YTJWMGFXNW5MV0YxTG0xNWMyaHZjR2xtZVM1amIyMEdPZ1pGVkE9PSIsImV4cCI6IjIwMjMtMDItMTVUMDg6MTE6NDQuODkxWiIsInB1ciI6InBlcm1hbmVudF9wYXNzd29yZF9ieXBhc3MifX0%3D–1b5b59730fac9d6fd58563180738b48ee7b3fee2&_fd=0&_sc=1

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:

Hoping someone call help me

[BSS-Commerce]

Hi @dekiv

Please follow these steps:

• Step 1: Themes => Edit Code:

• 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.

[dekiv]

@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:

[gnip]

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