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
Square space drop down menus tags full#
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:
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:
Square space drop down menus tags how to#
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 kommentar(er)
