Scrollr

August 20, 2021

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

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.

Available patterns

  • Trigger buttons
  • Contact
  • Cookies & GDPR
  • Call to action
  • Media
  • Promo
  • Signups

Currently there’s more than 80+ patterns suitable for FloatAny or InjectAny panels, but you can also use them in regular posts.

Use Patterns as a foundation for the MaxBoxy content. It may be it’s all you need, but at least it’s certainly a strong base in building attractive designs for FloatAny or InjectAny panels.

Panel types

  • Toggler
  • Closer

Panel roles

  • Rotator
  • Hidden
  • Banish
  • Exit intent
  • Hover out
  • Igniter

Showing style

  • Bump in
  • Fade in
  • Slide in (horizontal)
  • Slide in (Vertical)

Panel display

  • Site global loaded 
  • WordPress block interface
  • Shortcode

On-load/on-click initiation

  • Display a panel on page’s load or open it on a visitor’s click of a link/button

No coding knowledge

  • There’s no need to be a developer or a web designer to create panels

Embed forms

  • You can insert any form that is compatible with WordPress editor

Unlimited styling/content

  • Set image backgrounds, add videos, maps, use any WordPress block

Set different locations

  • Left topped
  • Left centered
  • Left bottomed
  • Center topped
  • Center
  • Center bottomed
  • Right topped
  • Right centered
  • Right bottomed
  • Position inline
  • Head (InjectAny)
  • Top body (InjectAny)
  • Bottom body (InjectAny)

Create different styles

  • Style borders
  • Style togglers
  • Change sizes
  • Apply light-box
  • Unlimited colors
  • Mobile friendly

Conversion

  • Set goals (Clicks or form submissions)
  • Measure loads/views/goals

Particular pages conditions

  • Show a panel on a certain page(s) or post(s)
  • Show a panel on a specific post type(s), e.g. for products
  • Show a panel only for archive pages
  • Show a panel for particular categories
  • Show a panel for specific tag(s)
  • Exclude individually from showing on each post/page

Event & condition exists triggers

  • Show a panel if element is present
  • Appear after specified time (seconds)
  • Appear after specified element enters the viewport
  • Appear after specified element exits viewport
  • Show a panel for the first timers (only show for x page views)
  • Show a panel for the first timers (only show after x page views)
  • Show a panel based on logging status (for logged in/logged out users)
  • Show a panel based on user roles (Editor, Contributor, Customer, etc.)
  • Show a panel for devices – Mobile/Desktop
  • Show a panel based on referrer – Domain(s) or URL(s)
  • Restrict for certain Country and City
  • Create date/time campaigns