Jump to content

Smooth scrolling aligns to text not section

Recommended Posts

Site URL: https://www.botisseva.com/about

The 'about' section of this website is very long, so I added arrow buttons at the bottom of each section to take you to the section below. I did this by adding the relevant section ID to each button and then enabled smooth scrolling with this:

html {
scroll-behavior: smooth;

I'm fairly happy with how it works, except that when it scrolls down it lines up with the text in the section, rather than the top of the section itself, which doesn't look as good (so basically there is no margin at the top). Does anyone know how to make it line up with the top of the section?

A second question – is there additonal code i can add to control the speed of the scroll?

Screenshot 2021-03-02 at 12.38.28.png

Screenshot 2021-03-02 at 12.38.42.png

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images


Thanks for the repsonse. This makes it look better but not perfect – I think this is just off-setting the scroll by 90px above where the text is?

Each section on the page is set to the 'large' section height in squarespace, which from what I can see makes it fill the browser window top to bottom – regardless of how big the window is (I might be wrong about this).

So when it scrolls, I want it to hit that section exactly at the top, so that it fills the whole screen, and doesn't have a bit of the section above or below showing – as in the attached images. It might not be possible I guess, but I would love it to be!

Screenshot 2021-03-03 at 11.46.21.jpg

Screenshot 2021-03-03 at 11.46.40.jpg

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.