How to Add a Scroll to Top Button in your WordPress Website?

How to Add a Scroll to Top Button in your WordPress Website?

Learn WordPress – Tutorials

Published on June 14, 2020 by Prithu Singh Thakuri

0 Comment

How to Add a Scroll to Top Button in your WordPress Website

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

Smart Scroll To Top

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

See what is in this blog (table of contents) hide

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?’

Smart Scroll To Top

Smart Scroll To Top

Smart Scroll To Top

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.

How to Add a Scroll to Top Button in your WordPress Website

How to Add a Scroll to Top Button in your WordPress Website

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.

Add a Scroll to Top Button in your WordPress Website

Add a Scroll to Top Button in your WordPress Website

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

Layout Settings

Smart Scroll To Top - Layout Settings

Smart Scroll To Top - Layout 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

Smart Scroll To Top - Action Settings

Smart Scroll To Top - Action Settings

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

Add a Scroll to Top Button

Add a Scroll to Top Button

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.

Export Setting

Smart Scroll To Top - Export Setting

Smart Scroll To Top - Export Setting

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.

Import Setting

Smart Scroll To Top - Import Setting

Smart Scroll To Top - Import Setting

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

Add Scoll To Top Button

Add Scoll To Top Button

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.

Smart Scroll To Top - Custom Template Setting

Smart Scroll To Top - Custom Template Setting

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.

Selecting a Custom Template - Smart Scroll To Top

Selecting a Custom Template - Smart Scroll To Top

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.

AccessPress Themes has both the free and premium version of the Smart Scroll To Top. If you want to start with free and move to pro, you can Download the plugin. 

Purchase                      Download 

Get latest updates, deals and more from us!

Deals, Updates
and more…

Source

Leave a comment

Send a Comment

Your email address will not be published. Required fields are marked *