Scrollr – Smoothly scroll over the page’s content

Scrollr is the WordPress plugin that enables smooth scrolling on the page when you link to in-page sections.

Download and Install Scrollr Plugin

Scrollr is a free plugin and it is stored at the wordpress.org repository.

You can install the plugin in 2 ways:

  • You should be able to search for the Scrollr from your WordPress dashboard (Dashboard -> Plugins -> Add new). When found in the search results, just select “Install now”.
  • Alternatively, you can download it from the wordpress.org repository. Once you download the Scrollr plugin, upload the folder to the Plugins directory of your WordPress installation.

Eventually, in your WordPress dashboard, navigate to the Plugins section, Scrollr plugin should be listed now among the other plugins. Activate it.

Scroll to section (Pager sections)

Create triggers that link to the page’s sections. This way, you can make documentation pages, one-pager scrolling pages or simple “push to buttons”. The most common elements to serve as triggers are menu item, button, link in paragraph or image.

This is how you create a trigger element and connect it with its linking section:

  1. Section – Create a page’s section and add a HTML anchor text to it, e.g. “my-section“. This is done from Advanced block’s options (native WordPress feature). Note this text, you’ll need it for the next step
  2. Trigger – Add a WordPress’ block which will serve as a section linker, e.g. a button
    • add a class to this block – “scrollr”
    • make a link from this element by entering the same text value you’ve used while creating the section’s anchor, just make sure it starts with a sign “#” i.e. “#my-section“
set a HTML anchor for a block in WordPress
Set section’s HTML anchor
WordPress block - set a link and add a class
Add “scrollr” class to a link

Options:

The following options are usually useful if you are making the scrollr triggers sticky (e.g. in a sidebar) and they are intersecting with the section they are linking to.

  • scrollr-mark-hor – add this class to the parent element of the scrollr trigger(s). This will mark all its children scrollr triggers with horizontal border when intersecting with the section it’s linking to
  • scrollr-mark-ver – add this class to the parent element of the scrollr trigger(s). This will mark all its children scrollr triggers with vertical border when intersecting with the section it’s linking to

Scrolling example

If you explore our site, you’ll notice a lot of the scrollr usage, but lets see a simple example. Click here and you should be moved up to the section heading.

To see the potential of the plugin see how we have created this documentation page for our other plugin.

Push to top

Setting a push to top element seemed like a logical addition to the plugin.

This is done by adding a class “scrollr-top” to a WordPress’ block, e.g. button or menu item.

Push to top example

Again, if you look carefully you’ll notice that this is already available on our site. Still here’s an example from the content – just click here.