Merhaba, yalnızca CSS ve HTML ile de mümkündür fakat istediğiniz gibi durmayacaktır muhtemelen. Aşağıdaki çalışma çok basit aslında, deneyebilirsiniz.
https://codepen.io/avabarok/pen/WNajjrz
1- Sitenin CSS dosyasına veya <head></head> içine ekleyin
<style type="text/css">
body {
height: 500vh;
background: linear-gradient(navy, skyblue, crimson);
}
button {
position: fixed;
bottom: 20px;
right: 20px;
}
</style>2- <body></body> arasında bir yere ekleyin
<button hidden="hidden">Back to top</button>
3- Sitenin en alt kısmına </body> öncesine ekleyin.
<script>
const backToTopButton = document.querySelector("button");
backToTopButton.onclick = () =>
document.documentElement.scroll({
top: 0,
behavior: "smooth"
});
window.onscroll = () => {
if (document.documentElement.scrollTop > 200) {
backToTopButton.hidden = false;
} else {
backToTopButton.hidden = true;
}
};
</script>