Scrolling from the bottom of a page all the way to the top is a burden for visitors. Solve that problem for your website visitors by activating the Scroll To Top WPHubSite Theme pro module.
When you activate and follow this help article to customize your scroll to top button you’ll have something that looks like the following.
After you activated the module, customize the scroll to top button to match your company branding.
Customize The Scroll To Top Button
We’re going to create a scroll to top button similar to the one shown above but a circle instead of a square.
Let’s get started!
Step 1: Hover over or click on Appearance in the WPHubSite WordPress dashboard.
Step 2: Click on Customize.
Step 3: Click on Global in the WPHubsite Theme customizer.
Step 4: Click Scroll To Top.
Step 5: Choose where you’d like to show the scroll to top button. Here are your choices:
- Desktop: Show the button only one desktop size browsers. It will be invisible on desktop computers and some tablets.
- Mobile: Show on mobile devices only. It will show on mobile phones and some small tablets.
- Desktop + Mobile: It will show for everyone no matter what size device they’re using.
Step 6: Choose whether to show on the left or right of the window.
Note: It will always show at the bottom of the window no matter what side you choose.
Step 7: Set the icon’s size (in pixels).
Step 8: Set a border radius.
Note: If you want a circle, set the radius to the icon size or greater.
Step 9: Set the icon and button colors for normal and hover states.
Step 10: Click Publish.
That’s it! You just created a scroll to top button that will show up after users scroll a bit of the way down on your website. It will disappear at the top of your website but after scrolling for just a bit you’ll see it appear.
When you click the scroll to top button the window will smoothly scroll to the top of your page for all pages on your website. Below is what the scroll to top button looks like that we just created.
