The Back to top with progress scrollbar module provides a drupal block for the Back to top with progress scrollbar which provice configurable smooth back to top button with a circular progress bar which indicates the current reading progress.

Has full features that stick to the basic.

Scrollbar with icon
Scrollbar with scroll percentage
Scrollbar postion, colors configuraitons and shadows with drupal block

We can copy the template file from templates/back-to-top-with-pi.html.twig to your theme file and customize the html and implement your own layout with custom css and also override the javascript codes. The unicons CSS library has been used to add icon on the scrollbar but we can also override css to add custom icons, fontawesome icon, flaticon etc.

Available variables on the twig template:

 Available variables:
- back_to_top_data: Array of back to top config data.
  - circle_stroke_color: Circle stroke color is the line of color that precisely follows a path on page scroll.
  - progress_box_shadow: Progress box shadow color where the stroke will follow a path on page scroll
  - icon_color: Icon color
  - icon_hover_color: Icon color on hover
  - scroll_bar_position: Scrollbar
  - has_shadow: Scrollbar has shadow on hover
  - shadow_color: Scrollbar shadow color
  - has_fill_color: Scrollbar will be filled with color. The default fill color will be transparent if the checkbox is not checked.
  - created_at: Block created timestamp
  - scrollbar_type: Scrollbar display with arrow icon or scroll percentage
  - fill_color: Scrollbar fill color

Support

Please post bug reports, feature requests and support requests to the Back to top with progress scrollbar module issue queue.

Demo

Go to https://simplytest.me/project/back_to_top_with_pi.
Click "Launch Sandbox".
Install Drupal as normal.
Enable "Back to top with progress scrollbar" module, and any optional modules you wish to try out.

Installation and download

Installation with Composer:

composer require 'drupal/back_to_top_with_pi'

Download latest version

Enable the module

Using the Drupal User Interface

Navigate to the Extend page (admin/modules) via the Manage administrative menu
Locate the Back to top with progress scrollbar module and check the box next to the module
Click Install to enable (turn on) the module

Looking for Back to top with progress scrollbar support?

Free community support options: Developers can participate our support channels on a best-effort basis, Drupal Answers.

Back to top with progress scrollbar