How can I set up anchor links and smooth scrolling on my 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=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:

Hoping someone call help me

[GemPages]

Hello @dekiv

It's GemPages support team and glad to support you today.

Q1: To get anchor link to section, Please right click -> choose Inspect

Copy Id section want to scroll to

Paste Id section to here (add # character on start of Id section)

Q2: To make smooth scroll, Please go to Online Store -> Theme -> Edit code

Open your theme.liquid file, paste the below code before </body>

<style>
  html{
    scroll-behavior: smooth;
  }
</style>

I hope the above is useful to you.

Kind & Best regards, 
GemPages Support Team

[dekiv]

@GemPages Thank you so much for showing me that! It definitely works.

But how do I make it so that when it scrolls to that section, only that section is shown and not any other section? As you can see from screenshot, when I click on it, the "Social Media" section is visible below it: