Jump to content

Anchor Links Scrolling Too Far in 7.1

Recommended Posts

Site URL: https://www.urgentlyortho.com/ephraim-dickinson-md

Someone PLEASE help! I'm so perplexed by this issue with the simplest code! I have anchor links on one page (see provided site URL) that should link to the Surgery page (found in top nav). Basically Page 1 has a list of different surgery types that you can learn more about by clicking the pink links and it should take you to that surgery type section on Page 2. It works 99% of the time for "Shoulder Surgery" but scrolls wayyy too past the other sections (Elbow, Knee, Hand/Wrist, etc). I'm using the exact same code for all of them so why does it work for Shoulder Surgery but not the others??

Code for Anchor Link section:

<div id='[bodypart-surgery' style='position:relative; top:-100px;'></div>

Link from Page 1:


See website here: https://www.urgentlyortho.com/ephraim-dickinson-md 


Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic


Based off previous experience with anchor links like this, it might be related to the fact your website navigation bar is fixed (sticky). You might need some custom code that can accommodate for the space taken up by that fixed nav bar. If I'm guessing right, you probably tried to accommodate for the fixed nav by using the "top -100px;" style, but I think that only works for elements that are positioned absolute. Instead of doing top -100px, try making the height of the div with the ID 100px:

<div id='bodypart-surgery' style='position:relative; height:100px;'></div>


Feel free to email me with any customization inquiries or questions you may have!

Free Squarespace Resources: DevTools Minicourse,  11-Step Guide to Improve Custom CSS, Free Product/Pricing Comparison Table Generator

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.