In this article we will be learning to create a Go To Top Button in our webpage. We will show a Go To Top button in our webpage if user is not in the top. On clicking the button, the user will be taken to the top of the webpage with smooth animation.
HTML
<div class="scrollTop" style="opacity:0;">
<a href="javascript:;" class="go-to-top-icon"></a>
</div>
CSS
You can get the arrowTop image in PNG format here : arrowTop.png
<style>
.go-to-top-icon{
background:url("img/arrowTop.svg") no-repeat center center;
display: block;
background-size: 100%;
height:24px;
width:25px;
}
.scrollTop{
border-radius: 50px;
background-color: #000;
position: fixed;
bottom: 60px;
right: 10px;
z-index: 100;
width: 25px;
height: 25px;
}
</style>
JavaScript
<script>
$(window).scroll(function(){
var topPos = $(this).scrollTop();
if(topPos > 100){
$(".scrollTop").css('opacity','1');
}else{
$(".scrollTop").css('opacity','0');
}
});
$(".scrollTop").click(function(){
$("html, body").animate({
scrollTop:0
},800);
});
</script>
Follow this video for complete guidance :
