Back To Top Atom Documentation

  • JoomLeadTeam
  • 2 November 2016
  • No comments
  • Docs
Free Gantry5 atom to create a “smooth scroll back to top” button. Improve your website’s user experience with a very simple arrow which fades in when visitors start scrolling the page. See how Back To Top can be designed beautifully on Demo Page.

# Back To Top Package contents

Files Description
jlbacktotop.yaml Contains the Back To Top atom settings.
jlbacktotop.html.twig The Twig file to pull information, settings.
_jlbacktotop.scss The custom Back To Top style sheet. Use @import "jlbacktotop"; in your custom.scss file to import it. Gantry will automatically pick it up and compile it properly.

Installation Installing the particle on your website is a really simple process. You can refer to the document here to know more.

Requirements Back to top atom requires Uikit 3 for Gantry 5 Atom to be installed and enabled in your theme layout settings.

After you upload and implement this atom, go to your Template/Theme Settings > select the Layout to add Back To Top atom (i.e: Home) -> Page Settings -> Enable the Back To Top Atom


Settings Description
Title on hover Text field to translate the title text on hover, default Back To Top.
Icon Define the back to top icon using Gantry 5 icon picker. You can choose the icon, fontsize for navigation.
Background Color Customize the back to top background color.
Color Customize the back to top color.
Background Hover Customize the back to top background on hover.
Hover Color Customize the back to top icon color on hover.


Leave a Reply

You must be logged in to post a comment.