Scroll To Top Module Documentation

📝 Note: The Scroll To Top module is part of Neve Pro which you can get from here. If you would like to learn more about the Neve Pro Addon, take a look at Neve Pro Addon's full documentation.

This feature helps with the navigation within the page, by allowing the user to come back to the top of the page with just a click on the Scroll to Top icon. In this article the following subjects will be presented:

🖲️Activating the Module

1: Install the Neve PRO plugin, using these instructions.

2: Navigate to Neve > Neve Options > Neve Pro.

3: Enable the Scroll To Top module.

🧰Using the Module

The module adds a new panel of options that can be found in

📍 Appearance > Customize > Layout

There you will find various design options for the scroll to top button, customization options divided into three areas:

General

Style

Colors

📝 Note: In order to see these options, make sure you check the Enable Scroll to Top option.

⚙️General

The customizations available in this accordion are:

Choose Side - select one of the orientations of the button on the screen (Right or Left).
Type - with two options: Icon / Image - if chosen, it will generate another field, where you can attach the desired photo.
Scroll to Top Icon - pick the desired icon from the six available options.
Label - adds a text next to the default arrow.
Offset - is the number of pixels scrolled after which the Scroll to Top button will appear. You can undo the changes through the Reset button.
Hide on mobile - option to disable the Scroll to Top button on mobile devices.

🖌️Style

The customizations available in this accordion are:

Padding - in PX, along with a Reset and a link button, to connect all the dimensions ( Desktop | Tablet | Mobile ).
Icon Size - helps to set the perfect dimension for the icon ( in PX ), along with a Reset button (Desktop | Tablet | Mobile).
Border Radius - used to make the button round, along with a Reset button.

📝 Note: The Icon Size will not modify the size of the label too.

🌈Colors

The customizations available here refers to colors applied for different areas:

Color - text / arrow color.
Hover Color - text / arrow color when you hover with the mouse.
Background Color - background color of the shape.
Background Hover Color - background color of the shape when you hover with the mouse.

All of these areas can use the Global Colors of Neve, by clicking on the 🌐 icon.

📝 Note: By clicking on the color, you can create a gradient effect for each color item.

📝 Note: For further information about Global Colors in Neve, check this doc.