Jump to content

Anchor links in single page website in mobile version jump to wrong sections

Recommended Posts

Site URL: http://pardalis.co.uk

Hi all, 

I'm creating a one page website for a client and have put anchor links in corresponding sections of the site for easier jumping to sections. Originally I used ID blocks via a Squarespace extension, but later switched to anchor links.

However, when visiting the site in mobile version, when clicking the link in the navigation bar, the jump is way off below the actual placement of the link, at the very bottom of the section.

I'm using the 7.1. version, and see this is a common problem.

Is there a solution?
 

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Try this tutorial, very helpful:

https://www.will-myers.com/articles/perfect-anchor-links-in-squarespace

What SQSP extension were you using? Given Fluid Engine, it's really easy to have a code block in the top corner and hidden behind other blocks, but it's a feature I would love to be able see to add custom IDs to section.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
🔌
 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 Did I help? Buy me a coffee?

Link to comment

Thank you for your response!

The original extension I used was Squarespace ID finder for Chrome. However later I switched to anchor links as they're the standard. 


I've watched the video and the smooth scrolling option was helpful and worked.

However, when trying to apply the scroll margin and header option, again it worked great in desktop, but in the mobile version it put the actual anchor link in the bottom of the section where it should have been on top.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.