You might have wondered how to make scroll to up button that fires when you scroll down and when you click it it goes above the page.
Basically you need a css code for design, a javascript code for functionality and HTML code to display in the page.
HTML CODE
<a href="#" class="to-top active"> <i class="fa fa-chevron-up"></i> </a>
here i have used <a> tag whose case is to-top and active class is added which can be controlled by JavaScript.
font awesome is used so you can copy and paste CDN link for font awesome.
CSS CODE
Here are css code with explanation in the comment. You can copy and paste.
<style type="text/css">
/*below is scroll to top*/
.to-top{
background-color: rgba(87, 115, 228,0.5); /*background color of the button*/
color: #fff; /*color of text*/
font-size: 18px; /*font size of text*/
width: 40px; /*width and height for square shape button*/
height: 40px;
border-radius: 10%; /*curve at the age*/
position:fixed; /*for position relative to viewport*/
bottom:16px; /*16 px above the bottom*/
right:16px; /*position 16 px from right*/
display: flex; /* for the content at center*/
justify-content: center;
font-size:32px; /*font property*/
text-decoration:none;
pointer-events: none; /*no cursor shown*/
opacity: 0; /* opacity 0 makes content invisible*/
transition: all .9s; /* time for transition*/
}
.to-top.active{ /*rins when scroll to up is fired or active*/
bottom:32px; /*position from bottom*/
pointer-events:auto; /* now pointer appears*/
opacity: 1; /*opacity 1 makes content visible*/
}
html{
scroll-behavior: smooth; /* scroll-behavior:smooth helps to scroll up and down smoothly. It doesnot alow scroll-to-up button to show top of page at ones*/
}
</style>JAVASCRIPT CODE
Here is js code with explanation.
<script type="text/javascript">
var see = function() {
var ypos = window.pageYOffset; /*position of y*/
const toTop=document.querySelector(".to-top"); /*select class .to-top and store in to Top*/
if (ypos > 200) { /* if vertical position is greater than 200 then scrollto top appears or els deactivate*/
toTop.classList.add("active");
} else {
toTop.classList.remove("active");
}
}
window.addEventListener("scroll", see);
</script>If you have any problem. Please comment below.