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.

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.

Modify Page Scrolling

Added in version 2.1, this new configuration option allows you to apply a scroll offset (a gap between the top of the web page and an anchor target) and apply smooth scrolling. Both of these settings are applied using CSS, therefore they only work in more modern web browsers. The default scroll offset is 0px, with the intention you type your own dimensions and units of measurement in this input box (e.g. rem, em, px or %). When modifying scroll behaviour, you only need to add one instance of the AnchorPoint stack in this configuration, to the web page. Within edit mode, you are shown a brief summary of what's applied.

Theme Compatibility

The function to modify a theme navigation bar to include anchors on your links is only tested to work with ThemeFlood themes. This configuration may fail in themes you buy from other companies. It is important to understand that not all themes generate navigation links the same way. It was found that some themes and blank frameworks strip anchors and other attributes from links.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.