back-to-top-button.js

A simple, elegant back to top(scroll to top) button using IntersectionObserver

DEMO

Introduction

back-to-top-button.js is a simple JavaScript plugin that adds a button to your web page, allowing you to quickly scroll back to the top of the document with a single click. The button is automatically shown or hidden based on the user's scrolling position, using the Intersection Observer API.
The plugin is customizable and easy to use, and can be added to any web page or application with just a few lines of code. It's perfect for long pages, blog posts, e-commerce sites, or any other content-rich website that requires smooth and convenient navigation.

Feature

• Better user experience: The intersection observer method provides a smoother and more visually appealing transition to the top of the page.
• Improved performance: By using the intersection observer, the scroll-to-top button is only displayed when it's needed, reducing the amount of unnecessary DOM manipulation and improving the overall performance of the page.
• More customizable: The intersection observer method allows for greater customization of the scroll-to-top button. With CSS and JavaScript, the appearance and behavior of the button can be tailored to fit the specific needs of a website or application.
• Future-proof: The intersection observer is a modern and widely supported API, ensuring that the scroll-to-top button will continue to function as expected across a range of browsers and devices.

Usage

Download plugin and include file:

<script src="path/to/back-to-top-button.min.js"></script>