Anchors are a fundamental part of many websites. They offer a method for users to navigate within webpages. As an example you could have an introductory section of content at the top of a webpage, but provide links for the user to move down the page to another section. These are known as anchors.
Strangely despite their common use in websites, RapidWeaver has never offered native support for anchors. Traditionally you would have to write HTML code that included relevant anchor IDs. HTML code is not for everybody's liking. The AnchorPoint stack aims to bring this useful functionality to RapidWeaver, in a single, easy-to-use stack element.
Strangely despite their common use in websites, RapidWeaver has never offered native support for anchors. Traditionally you would have to write HTML code that included relevant anchor IDs. HTML code is not for everybody's liking. The AnchorPoint stack aims to bring this useful functionality to RapidWeaver, in a single, easy-to-use stack element.
Examples
An invisible AnchorPoint stack has been placed in this space here:my-anchor-point
If you click this link, you will find the webpage opens in a new tab or browser window. You are immediately scrolled down to this point of webpage.
You can hopefully begin to see and understand the benefits that anchor links provide in modern websites. For example, you could allocate products on a website their own anchors. If a customer contacted you asking for advice on which product to buy, you could immediately link them directly to suggested products. But the customer still has the freedom to scroll and navigate the webpage normally.
Setup
Install AnchorPoint in the normal way. Open your Stacks Library and drag and drop a copy into your webpage. Within the stack settings you can type the name of the new anchor point you want to create. All names need to be in a web-safe format; that is to mean they should not contain spaces or special characters. An anchor ID should always start with a letter (A-Z). Hyphens or underscores are permitted after the first letter.Creating a link that can move the user to an anchor point on the page is roughly the same process. Change the configuration type within the stack settings. Type the anchor ID of the anchor point you want to link towards, plus the label text you want shown on the link. Additional attributes (like class attributes and Bootstrap button values) are optional.
The third configuration available allows you to modify page navigation links with anchors, so that these too can navigate users to particular parts of webpages. To get this setup, type the label text of the webpage link you want to target (for example, the text label as it appears in your theme navigation bar). Then enter the anchor ID you want to scroll the user to, on the target page. You will probably want to setup your AnchorPoint stacks in this configuration as Partials and include them on every page of your website.
As always, all settings in AnchorPoint display information tooltips with more information about what each setting does and any important notes to follow.
