Hi, this is my first question here and hopefully it’s not too much, but how do I create an anchor link for my website? I want customers to be able to click on certain links on my mega menu on the homepage and be brought to that part of the homepage (not hyperlink). I’m not sure if it’s actually animated but I seen one YouTube video from 3 years ago that showed when clicked drags the screen down and not just teleports to it. But I have a feeling it doesn’t work now when I attempted. Additionally, is it possible that the mega menu link will still function like hyperlinks when customers are on product pages (because obviously it wont drag down their screen to that section if its not on my product page)
Topic summary
A user wants to implement smooth-scrolling anchor links in their Dawn theme homepage menu that navigate to specific page sections instead of jumping instantly.
Solution provided:
- Add a Custom Liquid section in the Header group containing JavaScript code for smooth scrolling behavior
- Place another Custom Liquid section with a unique ID (e.g.,
custom-anchor-1) at the target location on the page - Create menu items in Shopify Admin that link to these anchor IDs using the format
#custom-anchor-1
Troubleshooting steps:
- Initial code snippet was missing a leading
<character, causing the link to only update the URL without scrolling - After correction, the page was jumping instead of smoothly scrolling because the Custom Liquid block containing the smooth-scroll script was hidden and needed to be unhidden
Current status:
- Smooth scrolling now works on desktop view
- Mobile view still jumps to sections because the mobile menu needs to close first before scrolling
- A custom script is needed to handle mobile menu closure before anchor navigation, which the helper offered to provide later
- User accepted the desktop-only solution for now
1 Like
Thank you, I’m using the Dawn theme.
Instructions:
- Add a Custom Liquid section with this code to Header group area:
- Add Custom Liquid section with this code to where you want to smooth scroll to:
Note: You can change the id from “custom-anchor-1” to something else but make sure it doesn’t have spaces. Also, ids must be unique so don’t use the same id more than once.
div id="custom-anchor-1" style="display: block;">
- Remember the menu used in your header
- In Shopify Admin find your menu and add a menu item that links to that id
- Test
I’m confident I followed the instructions but when I click on the link, the screen doesn’t move. The only thing that happens is the link in the search bar changes to name of the anchor link.
Hey, sorry about that. I missed the leading “<” for the code snippet. It should be:
The code in the 2nd screenshot was incorrect. But, then I realized that I missed the leading “<” in the original reply
Gotcha! That fixed it. But instead of dragging down, it jumps to the section . Is there a fix for that
Should make it drag down. In your first screenshot it looks like the custom liquid block for that code is hidden. Unhide that custom liquid block
Done, do you think it might be an underlying problem on the stores code, because It still jumps
No, this works in my store. Can you link your store URL and password so I can check why it’s not working?
sent
It’s labled featured on mega menu
The dragging down (smooth scroll) is working
about to check mobile view if thats what youre using
Not sure, but for me It’s jumping, hopefully everyone else sees what you see
It works on desktop view. On mobile view I have to write a script that closes the mobile menu first then scrolls to the anchor.
I’ll write a script that does that in a little while.
Got it, alright this is fine then as long as everyone can see it, Thank you