Linking to specific part of page from main menu

Store Design
1

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

2

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

Screenshot 2023-06-04 at 21.33.45.png
Screenshot 2023-06-04 at 21.33.45.png2880×748 138 KB

Do you know how to find it in the inspector?

Let me know if you need further help!

Kind regards from Hamburg,
Najam

1 Like
3

got it working!! thanks Stearis.

i think im going to like it here :slightly_smiling_face:

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

1 Like
4

You sure will!

The Shopify community is great :slightly_smiling_face:

Let me check that for you.

1 Like
5

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

1 Like
6

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