1. Home
  2. Docs
  3. Happy Elementor Addons Fr...
  4. Happy Features
  5. Scroll To Top Feature

Scroll To Top Feature

Scroll-To-Top is a free feature of Happyaddons. It will allow your users to scroll to the top of any web page just by a single click of a button.

How To Use Happyaddons’ Scroll To Top Feature

Make sure you have the plugins below available on your website to enable this feature.


Once you have these plugins installed, get started with the following steps!

Step 01: Enable Scroll To Top Feature

To enable the Scroll-To-Top feature, navigate to Elementor Menu > Site Settings > Scroll To Top. You will get the Scroll-To-Top option there to enable. Toggle on it. 

Then, click on the Update button below.

Note: You have to reload your page to see the Scroll-To-Top enabled there.

Enable Scroll To Top Button

Step 02: Customize The Scroll-To-Top Button

You will get numerous options there to customize the Scroll-To-Top button.

Let’s have a short brief about these options.

  • The Position allows you to alter the position of the Scroll-To-Top button from left to right and right to left.
  • Using the Bottom option, you can move this button up or down.
  • The Right option allows you to move the button from right to left.
  • You can increase or decrease the button’s width by the width option.
  • The Height option will let you increase or decrease the height of this button.
  • Z Index will allow you to specify the stack order of the Scroll To Top button.
  • You can increase or decrease the rigidity of the button color with the Opacity option.
  • You can change the icon of your Scroll-To-Top button from the Icon option. Click on the Icon Library. A wide collection of Icons will appear on your screen.

Note: Here again, you have to reload your page once more to see the changes.

  • Icon size allows you to increase or decrease the size of the Scroll To Top button icon.
  • Using the Border Type, you can give a solid, double, dotted, dash, and groove type appearance to the button.
Change the Border Type of the Scroll To Top Button
  • From the Hover option, you can give the hover effect to your icon.
  • Icon color will allow you to change the color of your button icon.
  • The background color will let you alter the background of the button icon.
  • If you need to modify the radius of your Scroll To Top button, you can do it from the Border Radius option.
Change Border and Icon Color of The Scroll To Top Button

Note: Whatever changes you make, never forget to click on the Update button. Otherwise, your changes will not be saved.

Step 03: Turn Off Scroll To Top Button Only In Particular Page

Scroll To Top is a global feature of Happyaddons. You will see this button on all your web posts and pages once you enable it. However, you can keep it off for specific pages if you want in the following ways.

  • Click on the Setting Icon from the below-left corner.
Turn Off the Scroll To Top Button
  • You will get the Scroll To Top option there at the bottom. Click to expand it.
  • Toggle on the option to Disable Scroll To Top button.
Disable the Scroll To Top button
  • You will see the Scroll To Top button is disabled from the page.
Scroll To Top button disabled

This is how you can enable the Scroll To Top button on your website and then disable it on preferred pages.

If you want to see the process of enabling the Scroll To Top button in the video, here is a video tutorial for you.

Enhancement in the Scroll to Top Feature from v3.7.1 – 18 October 2022

Disable the button for individual responsive devices: 

You can now choose the display options for devices like Desktops, tablets, and Mobile. You can also hide/show Scroll To Top button for individual devices. 

Simply choose the device and toggle the button for enabling or disabling. 

sV76idO7XTfpldgQ8DT6TUDcMIFIJ1P1cwhmM4cLmO5d4ANRRL5eTX2zyhfaPFyBYwHDgRC5URpk8MI9gIUb zdYUzkeE pWWFa6Uu7vZUKlaJLlq0Lefg8NErTmxPxppwaioo5ZUPt5hhZkn3ZTvo21lvpnefnR1F5N68jkKFas2yA84m46Okg0 g

Media Type Controlling:

We have included media type control to the Scroll To Top button. We already know we can add icons, images, or text as a media type for the button. The exciting information is that we can now customize these media types per our requirements. 

For example:

We can control the size of the icon and images. 

Icon Size Controlling: 

C02btsxdoJpNP10EggtgYTu7ARciuTik55sle8 TbKw88zJz2ARmNOR6iiGguLqrKJ68sFImRhg1geEUM28OLDmQLlr4dM0CyqiCyJeqNMwRpnBuvDsFE5HAVPo lIcDitYPB0I8FJkJNul2XbAU4 1OLMJHpAk sq

Image Size Controlling:

gKBXoUepzVS B eyqliEtM9HGAovIXI8vWbaWGw8jXjfJIbp U3u5tvkErjXB2bDPslSbmWX84MnxF2A3rfoFudR1Kkg Hw4jN33TEyjmQop54MAKbSHZ4zf0t8f4Ord0fgE59DHS8Hr8p

Text/Typography Controlling:

We can customize the typography of the button text. You can choose font family, font size(ability to use a different size for responsive devices), weight, font transformation, font style, font decoration, line height, letter spacing, and word spacing

8sEL1X1EaltCTf8Mj5pLigL3nSCqWnZZXn996ZhB Pzk oj1UTztmarxepUXaGTYxBkoAwTUT8HocUzCGPQEEgx1JVEjIvfvLBtaEWZVzMbE8hbPI8ipaDDSle8dJ1pGGt8woBLey

Now, it’s time to decorate your Scroll-To-Top button as per your creative mind. 

How can we help?