How to Add a Scroll to Top Button in your WordPress Website?
Do you want to Add a Scroll to Top Button in your WordPress Website?
As website users, we strive to make the website more user-friendly and the best way to create a good user experience is to make it easy and convenient for the visitors to use. Having a Scroll to Top Button is a great way to improve the navigation of the site, especially in those cases where you have long-scrolling pages or infinite scroll functionality.
Most of the theme comes with scroll to top built-in features. This feature enables visitors who have scrolled through the content to quickly return back to the top of the page.
In this tutorial, we will learn to Add a Scroll to Top Button in WordPress website!
There are various ways to add Scroll to Top Button in the websites. But, the use of a particular plugin enables users to add a beautiful and smooth functioning and appearance in the site. For this, we introduce you the Faster and Easier Scroll to Top Plugin for WordPress – Smart Scroll To Top.
The easiest way to add scroll to top button in your WordPress website is by using this plugin. You can add scroll to top/go to top function on your site and increase user-accessibility and user-friendliness. The plugin allows you to do it in a simpler and beautiful way with minimal settings and configurations. Create scroll to top button in your site in the most beautiful way with the 25 beautifully pre-designed templates enriched with elegant functionalities now!
Major Features of Smart Scroll To Top:
- Pre-defined 25 templates
- 50+ stunning button animations
- Display button on different positions
- Multiple functions for scroll to top configuration
- Feature to preview in backend – test with ease before going live
- Import/Export faster and easier
- Advanced Customizations
Let’s Add a Scroll to Top Button in your WordPress Website!
Step 1: Installation of Smart Scroll To Top Plugin
Firstly, you need to get have Scroll to Top Plugin on your WordPress website. In order to do so, go to CodeCanyon and Purchase Smart Scroll To Top plugin. After the purchase is made, you will receive a zipped file in the Email.
In order to install the plugin in your site, follow our tutorial guide on ‘How to Install New WordPress Plugin?’
Install the plugin and Activate it on your site.
Step 2: Getting Started with the Plugin
Once you have successfully installed and activated the plugin on your site, check for the Smart Scroll to Top. It appears on the left admin sidebar menu.
- Click on it.
When you click on the menu, you will head towards the plugin’s landing page with various tabs on the left.
- Now, you have to click on the menu “Smart Scroll to Top” or sub-menu “SSTT Listing”.
This will take you to the tab list page. There you can see the default tab on the list.
- Click on the Add New Element button.
In this page, you can set the behavioural and display settings for your Smart scroll button. The page consist of two basic tabs menu which are:
- Layout Settings
- Action Settings
In this page, you have the option to choose the type of button template, the position of the button. Further, you also have the Custom Template Settings or Default Template option.
Action Settings are also behavioural settings. Here, the users can choose on the speed, scroll button display offset and other behaviours of scroll button.
Step 3: General Setting
In this setting page, users can enable the use of Smart Scroll buttons. Enable/disable the Smart Scroll buttons and choose the place to display it, either Home Page or All Pages.
You can export the elements and custom template to a new site easily from the export setting section. The exported JSON data is auto-generated depending on the selections made. The JSON data can be copied or downloaded as a JSON file.
The JSON code generated from exporting the plugin data from the source site is imported from this page. Depending on whether the JSON code is copied or downloaded from the source it is either pasted or uploaded in the destination site.
Step 4: Custom Template Setting
You can find the Custom template menu option below the Import/ Export menu in the WordPress admin menu section.
Once you are inside the custom template menu you will find yourself in the Custom Templates listing page. If you have previously added custom templates then they will be listed, if not, try adding a custom template.
Custom Template allows you to include additional display features to the Scroll to top buttons.
It is independent of any scroll to top button you have create so far. You need to select a specific custom template to the scroll to top button so that the Custom template option apply for that button.
Selecting a Custom Template
Once you add a Custom Template, select in a smart scroll button setting so as to apply it in the frontend layout.
- Select the Custom Template from the layout setting tab of the Smart Scroll Settings Form.
In this way, you can easily add a Scroll to Top Button in your WordPress website in easy and simple way. The plugin also supports the free version.