In the world of web development, we’re about to embark on a journey to create a scroll-to-top button, and we’re going to do it with ease and animation. This guide will walk you through the process using HTML, CSS, and JavaScript, making your web pages more user-friendly.
Table of Contents
Introduction
The scroll-to-top button is a button that appears when we start scrolling a web page. Upon clicking, this button smoothly scrolls the page to the top of the page. For a longer web page, it is a good practice to scroll-to-top button for a better user experience. This button is usually placed at the right bottom corner of the website. When a user clicks it, it will take the user to the top of the page with a scroll. In this article, we will see how to create a scroll to the top with ease and animation.
The code recipe for the scroll-to-top button
The first step is you have to create a button that will when clicked, scroll the page to the top.
The first step is to create HTML. Assign this ID scroll_to_top to an anchor link:
<!-- create scroll top button --> <a id="scroll_to_top" href="#">Top</a>
Now we need to give this anchor link a button shape, you can style it according to your needs. Let’s do some basic CSS:
#scroll_to_top{
display: none;
position: fixed;
right: 0;
bottom: 30px;
background: #3399ff;
cursor: pointer;
padding: 10px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
color: #fff;
}
The next step is to create the scroll-to-top effect upon a click event. For this, we have to write JavaScript code:
<script>
// create the sroll Top with slow animation
$('#scroll_to_top').on("click",function(){
$('html,body').animate({ scrollTop: 0 }, 'slow');
});
</script>
The above script will enable the click event to scroll-to-top with animation.
Now, we will be creating a toggle (show & hide) on the button based on the browser’s scroll. This button is hidden by default. The button will be visible upon scrolling with offset. For this, we have to define the offset and animation speed. The code is:
// define variables
const offset = 220;
const duration = 500;
// initiate scroll function
$(window).scroll(function() {
// set offset from top of browser to toggle (Show/Hide) the Scroll Top button
if ($(this).scrollTop() >= offset) {
$('#scroll_to_top').fadeIn(duration);
} else {
$('#scroll_to_top').fadeOut(duration);
}
});
The implementation is completed here, but a small trick we are going to add to the code is to create dynamic content using JavaScript loops.
// create dynamic HTML code and append
for(var i = 0; i <= 5; i++){
$('#content').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tortor purus, placerat ut dignissim a, luctus ut magna. Nam posuere, purus eget ornare pellentesque, enim dolor sagittis lectus, nec porttitor nulla libero id quam. Sed vitae est felis, vitae sodales libero. Sed consectetur adipiscing elementum. Suspendisse magna diam, mollis a malesuada ut, rutrum a libero. Donec eget libero elit. Sed non augue ac magna porttitor posuere. Integer malesuada lorem sed augue fermentum vitae dictum lorem semper. Aliquam aliquam, justo sed placerat fringilla, magna erat placerat orci, a tristique risus ante at urna. Proin aliquet enim eget purus auctor eu interdum augue sagittis. Curabitur at dictum diam. Mauris risus est, tristique nec lobortis ut, ullamcorper quis nulla.</p> <br><br>');
}
The loop is using append() function which creates HTML content dynamically in the #content dom selector.
The full code
The full code of this article is:
<!DOCTYPE html>
<html>
<head>
<title>Scroll to the top with Ease - w3programmings</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
font-family: arial;
width: 80%;
margin: 0 auto;
}
h2 {
color: #3399ff;
font-size: 30px;
}
p {
background: #eee;
padding: 30px;
font-size: 16px;
line-height: 22px;
}
#scroll_to_top {
display: none;
position: fixed;
right: 0;
bottom: 30px;
background: #3399ff;
cursor: pointer;
padding: 10px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
color: #fff;
}
</style>
</head>
<body>
<h2>Scroll to the top with ease animate</h2>
<!-- append JS dynamic code -->
<div id="content"></div>
<!-- create scroll top button -->
<a id="scroll_to_top">Top</a>
<!-- include jquery cdn -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type='text/javascript'>
$(window).load(function() {
// create dynamic HTML code and append
for (let i = 0; i <= 5; i++) {
$('#content').append('<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.Curabitur tortor purus, placerat ut dignissim a, luctus ut magna.Nam posuere, purus eget ornare pellentesque, enim dolor sagittis lectus, nec porttitor nulla libero id quam.Sed vitae est felis, vitae sodales libero.Sed consectetur adipiscing elementum.Suspendisse magna diam, mollis a malesuada ut, rutrum a libero.Donec eget libero elit.Sed non augue ac magna porttitor posuere.Integer malesuada lorem sed augue fermentum vitae dictum lorem semper.Aliquam aliquam, justo sed placerat fringilla, magna erat placerat orci, a tristique risus ante at urna.Proin aliquet enim eget purus auctor eu interdum augue sagittis.Curabitur at dictum diam.Mauris risus est, tristique nec lobortis ut, ullamcorper quis nulla. </p> <br> <br> ');
}
// define variables
const offset = 220;
const duration = 500;
// initiate scroll function
$(window).scroll(function() {
// set offset from top of browser to toggle (Show/Hide) the Scroll Top button
if ($(this).scrollTop() >= offset) {
$('#scroll_to_top').fadeIn(duration);
} else {
$('#scroll_to_top').fadeOut(duration);
}
});
// create the sroll Top with slow animation
$('#scroll_to_top').on("click", function() {
$('html,body').animate({
scrollTop: 0
}, 'slow');
});
});
</script>
</body>
</html>
Testing and Optimization: Making Sure It’s Smooth
Let’s do a quick test. Make sure your button works on all devices. The user experience should be your top priority. The site users should feel the scroll-to-top button behavior to be useful.
Conclusion
And there you have it! You’ve just added a scroll-to-top button to your website with easy steps. Your website is now cooler and more user-friendly. Go ahead, play around, and make it your own styling. By adding these friendly features, you’re not just creating a website; you’re building a place where people want to hang out. Enjoy making your web pages more awesome and fun for everyone!
