| Drupal

Add a "Back to Top" Arrow to Your Drupal Site

Sites with long pieces of content or with a long landing page often have a little arrow at the bottom, which helps you get back to the top of the site instead of scrolling the whole way back.

The Back To Top Drupal 8 module helps site-builders who are not yet ready to work with templates or JavaScript to place this kind of button on their sites.

Keep reading to find out how.


Step #1. Download and Install the Required Module

  • Open the terminal application on your PC
  • Go to the root of your Drupal installation (the composer.json file is inside this directory)
  • Type the following command:

composer require drupal/back_to_top

Type the composer command

  • Click Extend
  • Scroll down and search the Back to top module, check it
  • Click Install

Click Install


Step #2. The Module Configuration

  • Click Configuration > User Interface > Back to Top
  • Check Prevent on administration pages and node edit
  • Change the Button text
  • Leave the default PNG 24 image button
  • Click Save configuration

Click Save configuration


Step #3. Replace the Button Image

The image file is called backtotop.png and is located at /modules/contrib/backtotop.

  • Rename the file backtotop.png to backtotop1.png
  • Paste a new image file (70px wide, 70px high) called backtotop.png into this directory
  • Paste another image file with the same dimensions called backtotop3.png.

This file will be used to achieve a hover effect.

This file will be used to achieve a hover effect

The backtoto2x.png is for retina displays there. You can replace this file with the same method. Make sure the file is this time 140px wide and 140px high.


Step #4. Edit the CSS Code

To display the green arrow when hovering over the yellow arrow you have to edit the CSS code of the module.

The CSS file is located at /modules/contrib/back_to_top_css.

  • Open this file in the code editor of your liking
  • Edit the #backtotop:hover selector
  • Add the following code:
#backtotop:hover { 
background: url(../backtotop3.png) no-repeat center center; 
bottom: 20px; 
cursor: pointer; 
display: none; 
height: 70px; position: 
fixed; right: 20px; 
text-indent:-9999px; 
width: 70px; z-index: 300; 
}

Add this code

  • Click Configuration > Performance > Clear all caches
  • Important! Clear also the cache of your browser

Head over to a long article on your site and scroll down. The yellow arrow should appear.

Head over to a long article on your site and scroll down. The yellow arrow should appear

Hover over it to see how the other image gets pulled.

Hover over it to see how the other image gets pulled

If you click on this button the page will scroll back to the top.


The Text/CSS Button

I was not able to edit the colors of the button through the user interface. However, you can tweak the look and feel of it by editing the CSS file located at /modules/contrib/back_to_top/css/back_to_top_text.css.

You can tweak the look and feel of the button

You can tweak the look and feel of the button

I hope you liked reading this tutorial. Stay tuned for more Drupal content. Thanks!


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.