Clicky

Smoothly Scrolling RapidWeaver Pages
menu Menu

rjhweb design

rjhweb design

fast, flexible fair

Ninja News

RapidWeaver News & Reviews

Smoothly Scrolling RapidWeaver Pages

Just two days ago there was a question on the Weaver's Space "How do I get a page to smoothly scroll to an anchor from a text link?"
The question was answered immediately – "SmoothScroll". Now this is strange, as I'd only received Jeroen's newsletter (Marathia's Stacks) just ten minutes before! Some people, you see, do open newsletters when they flatter into their mailbox!

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.

SmoothScroll
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.

blog comments powered by Disqus
  • Stacks Image 35399
  • Stacks Image 35402
  • Stacks Image 35405
  • Stacks Image 35408
  • Stacks Image 35411
  • Stacks Image 35414
  • Stacks Image 35417
  • Stacks Image 35420
  • Stacks Image 35423
  • Stacks Image 35426
  • Stacks Image 35429
  • Stacks Image 35432
  • Stacks Image 35435
  • Stacks Image 35438
  • Stacks Image 35441
  • Stacks Image 35444
  • Stacks Image 35447
  • Stacks Image 35450
  • Stacks Image 35453
  • Stacks Image 35456
  • Stacks Image 35459
  • Stacks Image 35462
  • Stacks Image 35465
  • Stacks Image 35468
  • Stacks Image 35471
  • weaverthemes
  • Stacks Image 35477
  • Stacks Image 35480
  • Stacks Image 35483

Links to the developers ® All trademarks cited on this page are the property of their respective owners.

x

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.

* indicates required

Contact Information

My Image

rjh web design

265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
Thailand 58130

About Us

We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.

Legal

This site uses Cookies to determine the best method of display in combination with your browser.
We do not harvest or sell personal information.
© rjh web design 2010—16

This website was built with loving care on a Mac using Foundation. For more information, contact me.