Button Back To Top
06 Juni 2023
Pertama buatlah Tag Html nya terlebih dahulu.
<a id="backtotop"></a>
#backtotop {
bottom: 20px;
right: 20px;
width: 40px;
height: 40px;
position: fixed;
text-align: center;
border-radius: 5px;
display: inline-block;
background-color: #111;
transition: background-color .3s,
opacity .5s, visibility .5s;
opacity: 0;
visibility: hidden;
z-index: 80;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
#backtotop::after {
content: "\f0aa";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
font-size: 20px;
line-height: 40px;
color: #fff;
}
#backtotop:hover {
cursor: pointer;
opacity: 0.5;
background-color: #191919;
}
#backtotop:active {
background-color: #191919;
}
#backtotop.show {
opacity: 1;
visibility: visible;
}
@media (min-width: 500px) {
#backtotop {
margin: 25px;
}
}
var btn = $("#backtotop");
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass("show");
} else {
btn.removeClass("show");
}
});
btn.on("click", function(e) {
e.preventDefault();
$("html, body").animate({scrollTop:0},"300");
});
See the Pen Button Back To Top- by Firmansyah (@firmansyahbio) on CodePen.