The scroll to the top button is a button that appears when we start scrolling a web page. On click, this button smoothly scrolls the page to the top of the page. For a longer web page, it is a good practice to have scroll to the 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 animate.
The first step is you have to create a button that will when clicked, scroll the page to the top. Let’s do some 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;
}Assign this id scroll_to_top to an anchor link:
<!-- create scroll top button --> <a id="scroll_to_top" href="#">Top</a>
Here the anchor element will get a button shape, you can style it according to your needs.
The second 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 the 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:
<script>
// 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);
}
});
</script>The implementation completes here, but a small trick we are going to add to the code is to create dynamic content using JavaScript loops.
<script>
// 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>');
}
</script>The loop is using append() function which is creating HTML content dynamically in the #content selector.
The full code of this article is:
<!DOCTYPE html>
<html>
<head>
<title>Scroll to the top with Ease - w3programmings</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- include jquery cdn -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<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: 18px;
text-align: justify;
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>
<script type='text/javascript'>
$(window).load(function(){
// 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>');
}
var offset = 220;
var 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>
</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>
</body>
</html>
