JavaScript Başa Dön | Scroll To Up Butonu Kodu
Sitelerde çokça kullanılan yukarı çık, başa dön vb. isimlerle adlandırılan buton kodu.
<script>
var btnP =0;
window.addEventListener("load",function(){
btnP =window.scrollY;
});
window.addEventListener("scroll",function(){
scrollStat();
});
function scrollStat(){
btnP =window.scrollY;
if(btnP <=600 ){
document.getElementById("toTopBtn").className ="scrollToTopBtn";
}
else{
document.getElementById("toTopBtn").className ="scrollToTopBtn scrollToTopBtnShow";
}
}
function scrollToTop(){
window.scrollTo(0,0);
scrollStat();
}
</script>
<style>
*{
scroll-behavior: smooth;
}
.scrollToTopBtn{
position:fixed;
bottom:3%;
right:5%;
background-color:#e7e7e7;
color:#555;
font-size: 15px;
font-family: 'Helvetica';
font-weight: 400;
cursor:pointer;
transition: all 0.5s ease 0s;
width:auto;
height: auto;
display: none;
padding:10px 15px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 2px;
z-index: 99999;
line-height: 30px;
border:solid 1px #e7e7e7;
-webkit-box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 3px 0px;
-moz-box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 3px 0px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 3px 0px;
}
.scrollToTopBtnShow{
display: block;
}
.scrollToTopBtn:hover{
background-color:#079992;
border:solid 1px #079992;
color:#fff;
}
@media only screen and (max-width: 768px) {
.scrollToTopBtn{
font-size: 15px;
}
.scrollToTopBtn:hover{
background-color:#e7e7e7;
border:solid 1px #e7e7e7;
color:#555;
}
}
</style>
<div class="scrollToTopBtn" id="toTopBtn" onclick="scrollToTop()">⇡ Başa Dön</div>
Yorumlar
Yorum Gönder