Add a “Back to Top” Arrow to Your Drupal 8 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

• Click Extend
• Scroll down and search the Back to top module, check it
• 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

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.

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;  }

• 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.

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.

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