Learn how to create a scroll-to-top button with progress indicator using HTML, CSS, and JavaScript. Improve user experience and navigation on your website with this simple tutorial.
Table of Contents
A scroll-to-top button is a simple but effective tool that improves user experience and navigation on your website. When a user scrolls down a certain amount of pixels, the button appears, allowing users to quickly return to the top of the page without having to manually scroll up. This can be especially helpful on long pages or pages with multiple sections.
Adding a progress indicator to the button gives users a visual representation of how far down the page they have scrolled. This can be a thin bar that fills up as the user scrolls down the page, giving a clear indication of their progress. A progress indicator can be particularly useful on pages with lots of content or if your site has a parallax design.
In this tutorial, we will be using HTML, CSS, and JavaScript to create a scroll-to-top button with a progress indicator. This tutorial assumes basic knowledge of HTML, CSS, and JavaScript. We will guide you step-by-step through the process of creating a simple yet effective scroll-to-top button with a progress indicator. At the end of this tutorial, you will have a better understanding of how to improve user experience and navigation on your website.
Let's start making an amazing Scroll-to-Top button with a progress indicator using HTML, CSS, and JavaScript step by step.
Join My Telegram Channel to Download the Projects Source Code: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our scroll to top button.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
The below code is an HTML document that creates a webpage with a "Scroll to top button with progress indicator".
The document begins with the standard HTML declaration and sets the language to English. The title of the webpage is set to "Scroll to top button with progress indicator".
In the head section of the document, the character set is set to UTF-8, and the viewport is set to the width of the device. The document then imports Font Awesome icons using a Content Delivery Network (CDN) and links to an external CSS file called "styles.css".
In the body section, a container div with the heading "Scroll" is created.
Below the container div, there is another div with a class of "progress-wrap". Inside this div, an SVG (Scalable Vector Graphics) element is created with a class of "progress-circle svg-content". The SVG path describes a circle with a radius of 49, centered at 50,50. This is used as a progress indicator when scrolling the webpage.
Finally, the document imports jQuery, a popular JavaScript library, using a CDN and links to an external JavaScript file called "script.js" which presumably handles the functionality of the scroll to top button.
This is the basic structure of our scroll-to-top button using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the scroll-to-top button is in place, the next step is to add styling to the button using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our progress indicator effect.
The below code contains CSS rules for styling the HTML elements of a webpage that features a scroll to top button with a progress indicator.
The first rule sets the display property of the container element to flex and centers its content horizontally using justify-content. The width is set to auto and the height is set to 200vh, which means it will take up 200% of the viewport height.
The next rule sets the font size of the h1 element to be 12% of the viewport width.
The progress-wrap class is used for the scroll to top button with the progress indicator. It is positioned fixed to the bottom right corner of the screen, with a height and width of 46px. It has a cursor of a pointer and a border radius of 50px, which gives it a circular shape. The box-shadow creates an inset border effect around the circle. The z-index is set to 10000, which places it on top of other elements, and the initial opacity is set to 0 to make it invisible. The visibility is also set to hidden and the button is translated downwards by 15px. The transition property is used to animate the visibility and position changes when the button becomes active.
The active-progress class is used to make the button visible and to animate its position when the user scrolls the webpage.
The ::after pseudo-element is used to create the button icon using the Font Awesome icon font. The content property is set to '\f062' which renders the icon. It is positioned absolutely within the progress-wrap element and has a height and width of 46px, matching the dimensions of the progress-wrap element. The cursor property is set to a pointer to indicate that it is clickable. The transition property is used to animate the opacity of the icon when the user hovers over the progress-wrap element.
The lightScrollIcon class is used to change the color of the icon to a lighter shade when the user is hovering over the button.
The ::before pseudo-element is used to create the progress indicator circle that appears when the user scrolls the webpage. It is positioned absolutely within the progress-wrap element and has the same height and width as the ::after element. The content property is set to '\f062' to render the same icon as the ::after element, but its color is transparent. The background-image property is used to create a gradient background for the text using the linear-gradient function. The -webkit-background-clip and -webkit-text-fill-color properties are used to make the text color transparent and to fill the background image. The opacity property is initially set to 0 and the transition property is used to animate its opacity when the user hovers over the progress-wrap element.
The progress-wrap svg path rule sets the fill property of the path element to none.
The progress-wrap svg.progress-circle path rule sets the stroke property of the path element to #1f2029 and the stroke-width to 4. The box-sizing property is set to border-box and the transition property is used to animate the stroke when the user scrolls the webpage.
This will give our scroll-to-top button an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
.container{
display: flex;
justify-content: center;
width: auto;
height: 200vh;
}
h1{
font-size: 12vw;
}
.progress-wrap {
position: fixed;
right: 50px;
bottom: 50px;
height: 46px;
width: 46px;
cursor: pointer;
display: block;
border-radius: 50px;
box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
z-index: 10000;
opacity: 0;
visibility: hidden;
transform: translateY(15px);
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.progress-wrap.active-progress {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.progress-wrap::after {
position: absolute;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f062';
text-align: center;
line-height: 46px;
font-size: 18px;
color: #1f2029;
left: 0;
top: 0;
height: 46px;
width: 46px;
cursor: pointer;
display: block;
z-index: 1;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.lightScrollIcon::after {
color: #ecedf3 !important;
}
.progress-wrap:hover::after {
opacity: 0;
}
.progress-wrap::before {
position: absolute;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f062';
text-align: center;
line-height: 46px;
font-size: 18px;
opacity: 0;
background-image: linear-gradient(298deg, #da2c4d, #f8ab37);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
left: 0;
top: 0;
height: 46px;
width: 46px;
cursor: pointer;
display: block;
z-index: 2;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.progress-wrap:hover::before {
opacity: 1;
}
.progress-wrap svg path {
fill: none;
}
.progress-wrap svg.progress-circle path {
stroke: #1f2029;
stroke-width: 4;
box-sizing: border-box;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
} Step 3 (JavaScript Code):
Finally, we need to create a progress indicator function in JavaScript.
The code first wraps the entire script in an immediately invoked function expression (IIFE) to keep its variables and functions private.
Then, it waits for the document to be fully loaded and ready before executing the rest of the code.
Next, it initializes variables to create the progress bar. It sets up a path for the progress bar, calculates its length, and sets its attributes.
After that, it creates a function called "updateProgress" that updates the position of the progress bar based on the user's scroll position. It then calls this function when the document is first loaded and every time the user scrolls the page.
The code also adds an event listener to the window that adds or removes a class to the progress bar, depending on the user's scroll position. This class toggles the visibility of the progress bar.
Finally, the code adds an event listener to the progress bar that listens for a click. When the user clicks the progress bar, it animates the page scroll to the top of the page.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
(function($) { "use strict";
$(document).ready(function(){"use strict";
//Scroll back to top
var progressPath = document.querySelector('.progress-wrap path');
var pathLength = progressPath.getTotalLength();
progressPath.style.transition = progressPath.style.WebkitTransition = 'none';
progressPath.style.strokeDasharray = pathLength + ' ' + pathLength;
progressPath.style.strokeDashoffset = pathLength;
progressPath.getBoundingClientRect();
progressPath.style.transition = progressPath.style.WebkitTransition = 'stroke-dashoffset 10ms linear';
var updateProgress = function () {
var scroll = $(window).scrollTop();
var height = $(document).height() - $(window).height();
var progress = pathLength - (scroll * pathLength / height);
progressPath.style.strokeDashoffset = progress;
}
updateProgress();
$(window).scroll(updateProgress);
var offset = 50;
var duration = 550;
jQuery(window).on('scroll', function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.progress-wrap').addClass('active-progress');
} else {
jQuery('.progress-wrap').removeClass('active-progress');
}
});
jQuery('.progress-wrap').on('click', function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
})(jQuery); Final Output:
Conclusion:
In this tutorial, we have shown you how to create a scroll-to-top button with a progress indicator using HTML, CSS, and JavaScript. By adding a scroll-to-top button to your website, you can improve user experience and make it easier for users to navigate your site. The progress indicator gives users a visual representation of their progress on the page, making it easier for them to navigate long pages or pages with lots of content.
Remember, you can customize the design of the button and progress indicator to match the style of your website. You can also add hover effects and animations to make the button and indicator more interactive.
By following the steps outlined in this tutorial, you can easily add a scroll-to-top button with a progress indicator to your website. Not only will this improve user experience and navigation on your site, but it will also make your website look more professional.
We hope this tutorial has been helpful and has given you a better understanding of how to improve user experience and navigation on your website. If you have any questions or suggestions, feel free to leave them in the comments section below.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
