Add A Scroll To Top Button To Your WPHubSite WordPress Website

Build your website integrated with HubSpot on WPHubSite. It's the best all-in-one WordPress-based HubSpot website builder and it's free.

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.

WPHubSite Theme Scroll To Top button.

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!

WPHubSite WordPress Customizer

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.

WPHubSite Theme Customizer Global settings.

Step 4: Click Scroll To Top.

WPHubSite Theme Customizer Scroll To Top button option.

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.

WPHubSite Theme Customizer Scroll To Top settings.

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.

WPHubSite Theme Scroll To Top button.

Last Updated On November 16, 2020


Tag(s): , ,

Grow your business with the power of WordPress & HubSpot.

Get WPHubSite for the most powerful web platform integrated with the power of HubSpot for your inbound marketing strategy.