Stacks Image 1623

Anchor

Scroll to anchor sections in this or any other Stacks page in your website.

Instant Download
Requires Rapidweaver & Stacks Plugin v3.5 +
Stacks Image 1635

Overview

Scroll to anchor sections in this or any other Stacks page in your website.

You can create anchor locations on your page that are scrolled to when a link is clicked.
You can also scroll to anchor locations on another page when a link is clicked.
This is a multi mode stack, that contains everything you need to create both the page anchors and the links to scroll to them when clicked.

Demo

Any link you place inside an Anchor stack that is in link mode will trigger the stack to scroll to an anchor stack on the same page.

Test it now. Check out the browser support section.

Any link you place inside an Anchor stack that is in external mode will trigger the stack to scroll to an anchor stack on another page.

Custom Controls

A comprehensive explanation of each of the stacks custom settings.

Mode

There are 3 modes the stack operates in:

  • Is Anchor
  • Scrolls to Anchor on This Page
  • Scrolls to Anchor on Another Page

  • Is Anchor:
When in this mode, you simply place the stack at a location in the page you'd like another anchor stack to scroll to when clicked. Set a unique id for this stack in the stacks settings.

  • Scrolls to Anchor on This Page:
When in this mode, set the id in the settings to an Anchor stack you want the page to scroll to when clicked. Now place something inside the stack that you can add a link to. This can be anything you can normally add a link to, like text, a button, or an image for example. Add the link. It does not matter where your link points it will always scroll to the target anchor. I generally just set it as a blank link when the RW links panel opens.

  • Scrolls to Anchor on Another Page:
When in this mode, set the id in the settings to an Anchor stack on another page you want to scroll to when clicked. Now place something inside the stack that you can add a link to. This can be anything you can normally add a link to, like text, a button, or an image for example. Add the link. It does not matter where your link points it will always scroll to the target anchor. I generally just set it as a blank link when the RW links panel opens.


Anchor Id

This is a unique id for this stack. This id will be used to identify this stack as the target of another anchor stack in link mode with a matching id.

Top Offset

This offsets the distance that the page will scroll to when scrolling to this stack.

Browser Support

Tested in all major browsers, on desktop and mobile devices.

Explorer

Safari

Chrome

Firefox

FAQ

Important information

Further reference info pertinent to the successful use of this stack.

Stack installation

Download.

After purchase, you will be sent an email containing a download link for the stack.
Download the zip file from the link, and unzip it to reveal the stack inside.
You should now see the stack as a logo style icon.

Normal installation.

Double click the un-zipped stack file (the one that looks like a piece of lego).
This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Installation where more than one version of Rapidweaver is installed.

Sometimes if there is more than one version of Rapidweaver installed on your system, the double click method launches the wrong version of Rapidweaver to install the stack. To ensure the it is installed into the version you want to install to, you can, instead of double clicking the stack, just drag and drop it onto the appropriate Rapidweaver app icon in your dock at the bottom of your screen.

This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Manually Linking to an Anchor stack on another page.

You can make your own link to any anchor stack by simply adding the anchor stack id to the end of the page url like this:
https://www.doobox.co.uk/stacks_store/demos/demos/anchorext.html#da100
Where 1 is the id you set on the anchor stack placed on the page you are linking to.

Known compatibility issues

Links to anchors in external pages will only work when previewed in a browser, either locally or in the published page.

© 2018 Doobox Software. Building premium Software Mac, C4D, & RapidWeaver™