PHPMatters Help You Better Hosting Your PHP-based Sites
How to Enable WordPress Scroll to Top Function

How to Enable WordPress Scroll to Top Function

When designing a website, the user experience is the core aspect to think about. To achieve the great improvement of this point, many webmasters display the user-friendly navigation bar, adopt the high color contrast and use the clear Google fonts, etc. This time, we want to mention another important function you’d better enable – the scroll to top function.

In fact, this function is pretty useful for websites that contain the long and informative webpages, with which your readers can find an easy way for getting back to the top location of the whole page. Generally, if people scroll down, they will miss your navigation links that are generally located in the top section. In this case, with this special feature activated, they can return to the top of your webpage quickly. To be frank, this simply ensures an effortless and seamless reading experience for all the online visitors.

In the following, we have introduced a simple guide about how to enable WordPress scroll to top function, which is achieved by an obvious button that is often located at the bottom of your pages.

Utilize the Scroll Back to Top Plugin

Here, we have to mention that if you have enough knowledge about jQuery used in your WordPress site and are interested in DIY, you can surely add the smooth effect of scrolling to top on your own. However, if you are not a developer and are looking for an easier manner, installing and utilizing a useful plugin is a right choice for you.

In fact, we have found a lot of related plugins that help you achieve this function to benefit your readers easily. Among them, we finally decide to recommend the Scroll Back To Top plugin that has been updated frequently to avoid the online vulnerabilities and has been downloaded by tens of thousands of times.

In addition, this plugin can be fully functional and pre-configured upon the activation, which means the scroll to top button will appear on your pages automatically if people scroll down to your page bottom a little bit.

Scroll Back to Top Button

However, it also gives you the full freedom to customize the animation, position and icon of this jQuery based button. To do this, you can locate to the Settings area and click the Scroll Back to Top button. Here, there are 5 main aspects for you to set up.

Button Visibility

Firstly, you need to make this button visible to all the people by changing the Status to “Publicly Visible”. If you choose the status of Preview Mode, this button will be showcased only when logged in. This choice is great for the further configurations without affecting your common readers.

Besides, if you want, you can also determine the minimum and the maximum browser resolutions for the better display of this button.

Button Visibility

Overall Appearance

In this part, you can determine the overall look and feel of this scroll to top button, which include the pixel of width and height, the color of the background, background hover, foreground hover and foreground, the percentage of opacity and the pixel of the border.

Overall Button Appearance

Final Location

This plugin allows you to freely decide the final location of the scroll button. The options of the horizontal alignment include Left, Center and Right, while those of the vertical alignment include Top and Bottom. As the common reading habit is from left to right and from top to bottom, here, we recommend you to place the button at the right-bottom corner of your webpages.

In addition, you can determine the exact margin pixels for both the horizontal and vertical button distances from the edge.

Button Location

Ideal Label

There are 11 label types for you to choose to indicate that this button bears the scroll to top function. In this case, you can choose your preferred one along with the proper icon size. Even, you can use some custom texts as the button label, along with the suitable font size.

Ideal Button Label

Animation Settings

As for the animation options, you can decide the duration for button scroll, online visibility and the fade effect based on the mini-seconds. Frankly speaking, the default values are proper.

Animation Settings