linking to specific part of page from main menu

[DataEraser8732]

hi all firstly thanks in advance for your patience, im a shopify noob

ive read a few posts with similar questions but havent been able to find exactly a solution to what im trying to do.

i want to link from the main menu of my homepage, to a specific part of the homepage with a quick scroll down motion. 

im familiar with how to do this with anchor tags in html, but i dont understand how to do this in liquid. i can create the page#link menu item with no issues but my trouble is with where to create the jumppoint, and how to make it a quick scrolldown effect. attached are some screenshots-

ty pros, and looking forward to my future time on shopify

[stearis]

Hey, how are you doing?

You can do this by referring to the HTML ID that is assigned to the element like this:
/#shopify-section-template--17895463878921__87711e85-9614-428e-9184-f115f1cf8961

Do you know how to find it in the inspector?

Let me know if you need further help!

Kind regards from Hamburg,
Najam

[DataEraser8732]

got it working!! thanks Stearis.

i think im going to like it here 🙂

any way to have it scroll to that id rather than just instantly jumping?

[stearis]

You sure will!

The Shopify community is great 🙂 

Let me check that for you.

[stearis]

You can assign smooth scrolling it to the element directly or to the whole document:

/* Smooth scrolling inside an element */
#my-element {
	scroll-behavior: smooth;
}

/* Smooth scrolling on the whole document */
html {
	scroll-behavior: smooth;
}

 Let me know if that worked for you 🙂 

[DataEraser8732]

great!! where/how would i insert that code if i wanted my entire main page index.json to smooth scroll?