Anchor Links Scrolling Too Far in 7.1

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:

https://www.urgentlyortho.com/surgery/#bodypart-surgery

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

Hello!

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>