Robino
-
Posts
9 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by Robino
-
-
Update #2
Ok I got it working. This is how you add Smooth scrolling anchor links in Squarespace 7.1
This works in all browsers including mobile.
------------------------------------------------------------------------------------------------------------
1. Insert this code in the HEADER CODE INJECTION
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://unpkg.com/smoothscroll-polyfill/dist/smoothscroll.min.js"></script>
<script src="https://unpkg.com/smoothscroll-anchor-polyfill"></script>2. Insert this code in CUSTOM CSS
html {
--scroll-behavior: smooth;
scroll-behavior: smooth;
}3. Create your anchor links.
You will need to get the PAGE SECTION ID for the section you would want to anchor to. It looks like this: #page-section-5e2799dfc3035b3cf9e9c4d6
I have a hard time finding those IDs so what I do is right-click and inspect the section I want to anchor to and I do a search in the console and type: ID. Then you should be able to easily find all the page IDs.
Once you have your page ID, you can create text links or buttons, whatever links you want and just put the # sign before the ID so it looks like this:
#page-section-5e2799dfc3035b3cf9e9c4d6
That's it - smooth scrolling in all browsers and mobile. Note that in Chrome it will smooth scroll to a CODE BLOCK when using regular CODE block DIV IDs but it won't work in SAFARI / iPHONEs Mobile. Only the #page-sectionIDs work in all browsers.
-
-
I installed an anchor link on my homepage in Squarespace 7.1 and when i click the link it jumps to the section instead of scrolling down to it.
I'm using a CODE block with a DIV ID in the section I want to scroll to. see code below:
<div id="pp"></div>
and for the text link I put:
/homepage/#pp
It doesn't scroll, it just loads the section that has the Code Block with ID.
Any help is appreciated. Thx
7.1 Help with anchor links not scrolling.
in Customize with code
Posted
Ah that sucks, I wonder why it's not working for you. I just re-tested on my website to make sure Squarespace didn't update something that broke my solution and it is still working. Make sure you use page sections and that you don't have any other css code related to page scrolling that might be interfering with the code above.