Squarespace is a leading online website builder. Then we linked to that section via a main navigation link using a hashtag prefix.įAQ: What are the benefits of using Squarespace? To recap method B, we dived into the page source and found the section we needed. #page-section-5ec5004285641b15eddb5a81 Step 4: Enable Smooth Scroll Open up your header links (or any link within your page) and link to the section ID we copied from step 2 but using a # prefix, example: Page-section-5ec5004285641b15eddb5a81 Step 3: Link to the page section ID from a main navigation link To ensure we are in the right section of the page, note how there is text related to contact in the demo below.Ĭopy the full code within the id=”XXX” like this: As the Contact section is the last in the webpage, this should be the last reference with the search results. The result should suggest as many sections you have implemented in your Landing Page. Open up the webpage search tool (Command + F) and paste in the following code snippet: Step 2: Find and copy the ID of required page sectionįor this example we want to smooth scroll to the Contact section so we need to find a section with contact detail content. Don’t panic, we are going to break it down. This will open up the scary looking source code of the webpage. Open up your Landing Page, right-click anywhere and select View Page Source out the menu options: Link to the page section ID from a main navigation link.Find and copy the ID of required page section.Then we linked to that anchor link via a main navigation link. We inserted the anchor link via a code block. To recap method A, we inserted an anchor link just above the section we wanted to scroll to. You would repeat the steps for other sections on your Landing Page like Rates and Testimonials. … and that’s it! Our long-scrolling Landing Page now features a header navigation that smooth scrolls to our Contact section. Open up your header navigation links (or any link within your page) and link to the anchor we created using a # prefix, example:įinally to enable that graceful smooth scroll motion when clicking links, head over to Design → Custom CSS in the main Squarespace menu and paste in the following code: Step 2: Link to the anchor link from a main navigation link Select the Code block and proceed to paste in an anchor link like this: When editing the page, hover your tear drop cursor above the section to kick off the content block option panel. Step 1: Insert code block with anchor link To add an anchor link, we need that tiny bit of custom code above the relevant section, it’s real easy. So the link pointing to the contact anchor position would look like this:Īnd the actual anchor position code would look like this: We can navigation to these anchor positions by linking to the anchor name with a hashtag (#) prefix. Anchors are assigned a name like ‘contact’. Think of anchors as positions within our long-scrolling webpage. Link to the anchor link from a main navigation link.Method A: Insert code blocks with anchor links There are two methods to achieve smooth scroll using Squarespace 7.1, let’s continue: If you are using Squarespace 7.0 please refer to the older tutorial: How to Smooth Scroll to Index Blocks using Squarespace. Squarespace 7.1 demo arrow is on the right
0 Comments
Leave a Reply. |