SmoothScroll is a stack (or rather – a set of three stacks) that does exactly as it says on the tin – once it's placed on your page, the page will smoothly scroll to its position when a link is clicked.
Three stacks. SmoothScroll is the central stack, but it is accompanied by Anchor To TopBottom and Menu ToAnchor. Now, if I'd had these stacks three days ago, I'd have known exactly where to utilise them. As it is, I settled for a more complicated option.
SmoothScroll itself is a very simple stack. Drop it on your page and set an Anchor Name – a unique ID (you'll have more than one on your page – right?). Then all you need to do is add a link '#[Anchor Name]' to a text, image, or button. As simple as that. When the link is clicked, your page will smoothly scroll to where SmoothScroll is positioned.
Now it's difficult to make a screenshot of a smoothly scrolling webpage – just believe me – it works perfectly! I spent a couple of hours testing the various possibilities.
So what are the other two stacks?
Anchor To TopBottom is an anchor stack that can be placed at the top and/or bottom of a page. It has just two settings Set Anchor (top/bottom) and an ID. Once again, a link with '#[ID]' will send you to whichever position you have defined.
Menu ToAnchor is slightly more complicated and I needed Jeroen's demo project to get my head around it. But then, I'm thick sometimes.
Let's say you have a single page website and you want the menu bar to display the SmoothScroll sections on your page.
Define the sections using SmoothScroll and then drop Menu ToAnchor onto your page. Now add an Offsite Page for each of the sections to your project, give the pages the same name as your sections ID (just so that they are easily identifiable, then simply set '#' as the URL and activate Use Redirect Page.
Menu ToAnchor already displays a link – give this link the same Anchor Name as your first section, in the stack's settings and then go to Set Link and link to your Offsite Page.
You can now click the + button to add a child stack and repeat the process for as many SmoothScroll sections as you have on your page.
The result – your menu bar is now populated with the SmoothScroll sections on your page! When you click a menu entry, your page will smoothly scroll down (up, if you have a sticky menu) to the appropriate section.
You can, of course, combine all three linking methods as displayed in the screenshot above. I.E. in the menu bar, you'll see the chapter names then, underneath the chapters, you'll see links to each of the other chapters, plus links to the top and bottom of the page.
At first glance, SmoothScroll would seem to be a simple stack, but lot of thought has gone into it and I can highly recommend it.
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
Do you have a question regarding RapidWeaver?
Would you like help with your new project?
Would you like us to build your new RapidWeaver website?
Don’t miss a post!
Sign up for our monthly newsletter.
A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.
265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.
We do not harvest or sell personal information.
© rjh web design 2010—16