How To Use The Scroll Button Widget By Atomic Addons

The Scroll Button widget by Atomic Addons adds a button that scrolls the page smoothly to a section you choose. Place it in the page, for example under a hero to lead visitors down, or fix it to a corner of the screen as a “back to top” button that appears once visitors scroll. This guide covers adding the widget and its settings.

Enable the Scroll Button Widget

Scroll Button is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Scroll Button. You can also open the Menu / Navigation category.

4. 4

   Turn the Scroll Button widget on.

5. 5

   Click Save Settings.

Add the Scroll Button Widget

Scroll Button works on any page. For a “back to top” button on every page, put it in a footer template instead:

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Scroll Button. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

The button scrolls to a section by its ID. To give a section one, select the section or container, open its Advanced tab and type a name such as my-header in CSS ID.

Button

Open the widget and go to Content → Button:

1. 1

   Offset: Where the page stops, from -200px to 200px. A positive value stops that many pixels above the section, which keeps it clear of a sticky header.

2. 2

   Button Text: The label, “Scroll Up” by default. It accepts Dynamic Tags.

3. 3

   Section ID: The ID of the section to scroll to, without the #: my-header by default. If it is empty, or no section on the page has that ID, the button scrolls back to the top of the page.

4. 4

   Scroll Button Position: Default keeps the button in the page where you dropped it. Any other choice — Top Left, Top Center, Top Right, Center, Center Left, Center Right, Bottom Left, Bottom Center or Bottom Right — fixes it to that spot of the browser window.

5. 5

   Button Offset: With a fixed position only: the space between the button and the screen edges, per screen size.

6. 6

   Button Alignment: With the Default position only: left, center (the default), right or justified (full width), per screen size.

7. 7

   Button Icon: An angle-up arrow by default. Pick another icon, or remove it for a text-only button.

8. 8

   Icon Position: After the text (the default) or Before it.

9. 9

   Icon Spacing: The space between icon and text, 8px by default.

10. 10

    Hide On Before Scrolling: With a fixed position only: hides the button until the visitor has scrolled more than 300px down the page, and hides it again near the top. This is the usual setting for a “back to top” button.

Style the Scroll Button

Select the Style tab and open Button:

• Normal — color, background color, border, border radius, padding, typography and shadow.
• Hover — color, background color and border color on hover, and an Elementor hover Animation such as Grow or Float.
• Show Fancy Animation — makes the button round and adds a looping ring around it instead of the hover animation. Fancy Animation chooses Shadow Pulse (the default), Multi Shadow or Line Bounce; Animated Shadow Color or Animated Border Color colors the ring.