SmoothScroll Stacks Set

add an anchor you can scroll to smoothly

skip to: demos | usage | limitations | support

On a web page, links cannot only direct to other pages, but also to other locations on the same page. These so called destination anchors are used as bookmarks on a page you automatically scroll to when you click a link that directs to it elsewhere on a page. This is especially handy on pages with long pieces of text. Divide the text in chapters, make a table of content on the top, and let your visitor ‘jump’ from the table of content to the chapter and back; from the top to the bottom and vice versa, etc.

Unfortunately, when you just use destination anchors, the page will indeed jump up and down. This does not only look ugly, it may also confuse your visitors easily.

Here’s where the SmoothScroll Stack comes in. With this stack, you can not only create those destination anchors easily, your visitor will also be taken from one position on the page to the other smoothly.

The SmoothScroll Stack comes with two auxiliary stacks to further extend the benefits of destination anchors on your website:

SmoothScroll Stack - the basis
With this stack you can insert destination anchors on the page. With at least one of these stacks on a page, scrolling to any destination anchor will be smoothened.

AnchorTopBottom Stack - scroll all the way to the top or bottom
With this stack you can insert destination anchors to the very top and bottom of the page, optionally with an offset.

MenuToAnchor Stack - great for one-page-websites using the menu provided by the theme
With this stack you can turn menu items into links to destination anchors anywhere the page.

Demos

Demo #1 shows a basic example of the SmoothScroll Stack. There’s also an similar page without the SmoothScroll Stack to see the difference (demo #1b).

For an example of a one-page-site created with the MenuToAnchor Stack, see demo #2.

Demo #3 shows a creative combination of the ScrollShow Stack and the SmoothScroll Stack.

I’ve prepared a few RapidWeaver sandwich files with examples similar to those on the demo pages. You can download the here.
(download links are also included with the download of the SmoothScroll Stacks Set)

Usage

SmoothScroll Stack (see fig. 1)

Put copies of this stack anywhere you want a destination anchor.

Give each destination anchor a name that is unique for the page*.

To link to a destination anchor, set the URL of a link to #AnchorId (see fig. 5 and 6).

AnchorTopBottom Stack (see fig. 2)

Select where you want to insert (a) destination anchor(s): top and/or bottom.

Give each destination anchor a name that is unique for the page*.

Scrolling to the bottom of the page does not work in every theme. If it doesn’t, select the option try an alternative method. Usually, it will work than.

MenuToAnchor Stack (see fig. 3)

Add an offsite page and set its redirect URL to # (see fig. 4).

Click the plus button at the bottom to add a Set Menu Item Stack.

In this stack, set the link to this page and the destination anchor name*.

Repeat for every menu item you want to link to a destination anchor.

For anchor names, use only a-z, A-Z, 0-9, no spaces, no punctuation marks or other special characters; hyphens (-) and underscores ( _ ) are also allowed – as long as you don’t start with them.

Creating destination anchors and links manually
If you don’t want to (or can’t) use SmoothScroll Stacks everywhere you want destination anchors, you can create them manually. Just insert an element on the location you want a destination anchor like <h2 id="AnchorId">My header</h2>. This element can even be empty like: <div id="AnchorId"></div>.

Just make sure you have at least one copy of the SmoothScroll Stack on the page for the smoothness.

This comes in very handy on non-stacks pages. Use PlusKit to import one copy of the SmoothScroll Stack (here’s a tutorial in case you need help with that) and create the destination anchors manually.

Using a name attribute to specify a destination anchor is depreciated in HTML5. This means that things like <a name="AnchorId"></a> are not valid in HTML5 (although they will probably work in any browser, and are supported in this stack).

Limitations

With Javascript turned off, the AnchorTopBottom Stack and the MenuToAnchor Stack will not work. The SmoothScroll Stack will place the destination anchor, but the visitor will ‘jump’ to it without the smoothness.

The results of the MenuToAnchor Stack are not always great. For example: in some themes (like Voyager), clicking on the button to close the menu on a small screen, you will be taken to the top of the page. In other themes (like Reason and Split), the menu covers the content of the page when opening it on a small screen.

With some themes, setting a bottom destination anchor (with the AnchorTopBottom Stack) and linking to it in the menu (with the MenuToAnchor Stack) does not work in the ‘small’ menu, even with the alternative method. I’m not sure I’ll ever find a solution.
If you intend to use the combination of the AnchorTopBottom Stack and the MenuToAnchor Stack, and want a menu item to link to the bottom of the page, make sure to test it before your site goes live.

The scrolling will not be smooth with themes that use a select as a menu (like the Offload theme; see fig. 7). Fortunately, this kind of menu is rarely used anymore.

Support
Please use this form to report all issues, questions and comments.

This stack requires the Stacks plugin by YourHead (version 3 or higher).