• Stacks Image 488057
  • Stacks Image 488061
  • Stacks Image 488065

Smooth­Scroll 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 Smooth­Scroll 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 Smooth­Scroll Stack comes with two auxiliary stacks to further extend the benefits of destination anchors on your website:

Stacks Image 487996
Smooth­Scroll 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.

Stacks Image 488003
Anchor­Top­Bottom 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.

Stacks Image 488010
Menu­To­Anchor 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.

Demo #1 shows a basic example of the SmoothScroll Stack. There’s also an similar page without the Smooth­Scroll 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 Smooth­Scroll Stacks Set)
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 Smooth­Scroll 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 Smooth­Scroll Stack on the page for the smoothness.

This comes in very handy on non-stacks pages. Use PlusKit to import one copy of the Smooth­Scroll 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).

With Javascript turned off, the Anchor­Top­Bottom Stack and the Menu­To­Anchor Stack will not work. The Smooth­Scroll Stack will place the destination anchor, but the visitor will ‘jump’ to it without the smoothness.
The results of the Menu­To­Anchor 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 Anchor­Top­Bottom Stack) and linking to it in the menu (with the Menu­To­Anchor 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 Anchor­Top­Bottom Stack and the Menu­To­Anchor 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.
Please use this form to report all issues, questions and comments.

This stack requires the Stacks plugin by YourHead (version 3 or higher).
SmoothScroll Stack HUD - click to enlarge
fig. 1

AnchorTopBottom Stack HUD - click to enlarge
fig. 2

MenuToAnchor Item HUD - click to enlarge
fig. 3

Setting the offsite page - click to enlarge
fig. 4

SmoothScroll link (RapidWeaver) - click to enlarge
fig. 5

SmoothScroll link (HTML) - click to enlarge
fig. 6

example of a select - click to enlarge
fig. 7
© 2012-2018 Marathia Web Design | Contact