This tutorial demonstrates how to implement a simple scroll to top function with transition effect using jQuery.
Step 1: Simple HTML Page
For the purpose of this tutorial, we will add the following HTML Markup within the body of the HTML page:
<section class="topSection">
Top Section
</section>
<section class="bottomSection">
Bottom Section
</section>
<!-- You will need to copy the following code for your implementation -->
<a href="#" id="scrollTop">Scroll</a>
Please note, that we have added a simple anchor element(to act as the scroll to top button) at the bottom of the aforementioned snippet.
Step 2: Add Related CSS
Now lets add some CSS mark up to the page and our “scrollTop” element.
.topSection, .bottomSection{
background: #ccc;
height: 500px;
display:flex;
align-items: center;
justify-content: center;
}
/* You need only the following css class for your project */
#scrollTop{
opacity:0;
display:none;
width:30px;
height:30px;
position:fixed;
bottom:5vh;
right:5vh;
text-indent:-1000vw;
background-image:url(https://www.aritsltd.com/img/angle-up.svg);
background-size:contain;
background-repeat:no-repeat;
background-color:rgba(0,0,0,0);
transition:all 0.15s ease-out;
}
Step 3: Adding the following code in your custom JS File
Firstly, please make sure you have imported the jQuery library onto your html file. Then, add the following function in your custom js file.
var scrollAmountBeforeDisplay = 30;
var scrollTransitiontime = 1200;
var opacityTransitionTime = 150;
$(document).ready(function(e) {
scrollTopFunction();
})
//1. Scroll to Top of the Page
function scrollTopFunction() {
console.log($(window).scrollTop());
if ($(window).scrollTop() < scrollAmountBeforeDisplay) {
$('#scrollTop').fadeOut();
}
$(window).scroll(function() {
//If scroll amount is sufficient to display
if ($(this).scrollTop() > scrollAmountBeforeDisplay) {
if ($('#scrollTop').css("opacity") == "0") {
$('#scrollTop').css("display", "block");
setTimeout(function() {
$('#scrollTop').css("opacity", "1");
}, opacityTransitionTime);
}
}
//If scroll amount is insufficient to display
else {
if ($('#scrollTop').css("opacity") !== "0") {
$('#scrollTop').css("opacity", "0");
setTimeout(function() {
$('#scrollTop').css("display", "none");
}, opacityTransitionTime);
}
}
});
$('#scrollTop').bind("click", function(e) {
e.preventDefault();
window.location.hash = '';
$('html, body').animate({
scrollTop: 0
}, scrollTransitiontime);
});
}
Illustration on JSFiddle
Here is a JSFiddle to guide you along the way!
3 thoughts on “jQuery Scroll To Top Function Snippet”
You should be able to use any background image without any problem. If you provide a code snippet then I will be able to help you better
The solution is interesting and I would like to use it on a non for profit websit, but I can’t use my own .svg or .jpg file as background-image in .css
Why?
Hello Fahim, nice piece!