Stacks Image 1405

Anchor Stack

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


0 ratings

Instant download.
Requires: Stacks v3.5 or greater.
Version : 1.0.2
Released: 02/02/2018
Last Updated : 14/2/2018

Stack Info

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.

Settings

In this section, we have provided a comprehensive list of available settings, and a full description of what each of the settings does for the stack.

Stacks Image 243
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.

Edit Mode

We pay great attention to how we approach the editing interface of every stack, to ensure intuitive ease of use.

In Anchor mode, denoted by the single anchor icon, showing the stacks unique id, set in the stacks settings.

Stacks Image 771
FAQ

Important information that is pertinent to this stack. Please read, as there may well be something here that is essential to the deployment of this stack.

Browser support

This stack is supported in all modern browsers. Any exception to this rule will be listed below.

Safari

Chrome

Firefox

Explorer

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.

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.

Live Demo

Live demo 1 (scrolling to anchors on the same page)

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.

Text links, Image links, Button links, Any clickable link inside the stack in link mode will trigger the stack.

Test it now. Check out the info section.

Scroll to the Buy Now Section.

Live demo 2 (scrolling to anchors on another page)

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.

We have placed an anchor on another page. Clicking the link below will scroll to that anchor section.

Buy Now

We trust PayPal as our secure checkout provider.

Don't have a PayPal account? No worries. PayPal allows you to pay with your credit card if you do not have an account set-up.

Missing image

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

Anchor Stack