Jump to content

On-page anchor link scrolls to middle of section instead of top

Recommended Posts

Site URL: https://bsafe.best/features

Hi! I'm having an issue with multiple sites where the navigation bar has on-page anchor links that smooth-scroll to various sections. When the user clicks it - regardless of mobile or desktop - the page scrolls past the heading into the body of the section. 

I've tried using #page-section-pagesectionnumber and #custom ID as anchors with the same result. 

This is the smooth scroll code I'm using: 

///SMOOTH SCROLL///

html {
scroll-behavior: smooth;
}

Password is bSafe.

Note: the fixed-position header appears to be the culprit. Is there a way around it?

Edited by SmallSitesSarah
new information
Link to comment
17 hours ago, gabrielachuela said:

I'm having the same issue as the OP, and my header is not sticky. Please see the first button on: https://gabrielaydeko.squarespace.com/save-the-date (pw: boda).

First, change anchor url from this 

/save-the-date#page-section-62a343e75fe4dc3c2b60baaf

to this

#te-gusta

Next, add a Code Block above ¿Te gusta beber y comer? > Paste this code

<span id="te-gusta"></span>
<style>
  #te-gusta {
  	position: relative;
    top: -150px;
  }
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.