Şöyle basitinden yukarı çık butonu kodu olan yok mu?

Selamlar. Şöyle basitinden yukarı çık butonu kodu olan yok mu?
HTML ve CSS yeterli. .JS filan girince işin içine kafam yanıyor.
Nette bakıyorum bulamadım bir türlü. JS'li bulduklarımıda ben beceremedim.

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>

HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<!-- Sayfa içeriği -->
<p>İçerik burada.</p>

<!-- En yukarı çık butonu -->
<a href="#" class="scroll-to-top">Yukarı Çık</a>

</body>
</html>

CSS (styles.css):
/* En yukarı çık butonunun stilini belirleme */
.scroll-to-top {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
padding: 10px;
background-color: #007bff;
color: #fff;
border-radius: 50%;
text-align: center;
text-decoration: none;
font-size: 16px;
}

/* Kullanıcı sayfayı aşağı kaydırdığında butonu görünür yapma */
.scroll-to-top.active {
display: block;
}

@hk1337; hocam dediğiniz oldu lakin pek görseli hoşuma gitmedi. Şunu denedim, beceremedim. Bunu nasıl yerleştireceğim?

https://codepen.io/matthewcain/pen/ZepbeR

Sizin hatanız yok aslında, burada jquery'i dahil etmemişler o yüzden çalışmamıştır.

1- <head></head> arasına şunları ekleyin

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather:400,900,900i" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <!-- JQuery'i burada dahil etmiş oluyoruz -->
    <style type="text/css">
        #button {
          display: inline-block;
          background-color: #FF9800;
          width: 50px;
          height: 50px;
          text-align: center;
          border-radius: 4px;
          position: fixed;
          bottom: 30px;
          right: 30px;
          transition: background-color .3s,
            opacity .5s, visibility .5s;
          opacity: 0;
          visibility: hidden;
          z-index: 1000;
        }
        #button::after {
          content: "\f077";
          font-family: FontAwesome;
          font-weight: normal;
          font-style: normal;
          font-size: 2em;
          line-height: 50px;
          color: #fff;
        }
        #button:hover {
          cursor: pointer;
          background-color: #333;
        }
        #button:active {
          background-color: #555;
        }
        #button.show {
          opacity: 1;
          visibility: visible;
        }

        /* Styles for the content section */

        .content {
          width: 77%;
          margin: 50px auto;
          font-family: 'Merriweather', serif;
          font-size: 17px;
          color: #6c767a;
          line-height: 1.9;
        }
        @media (min-width: 500px) {
          .content {
            width: 43%;
          }
          #button {
            margin: 30px;
          }
        }
        .content h1 {
          margin-bottom: -10px;
          color: #03a9f4;
          line-height: 1.5;
        }
        .content h3 {
          font-style: italic;
          color: #96a2a7;
        }
    </style>

2- <body></body> arasına şunları ekleyin

<a id="button"></a>
    <script>
        var btn = $('#button');

        $(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');
        });
    </script>

CSS'ye ekleyeceğimiz bir şey yok mu hocam hepsi HTML'ye mi?

CSS dosyanız varsa <style></style> içindeki bütün kodları CSS dosyanıza taşıyabilirsiniz. Ben size basit olsun diye bu şekilde ilettim. Bunu yaptıktan sonra <head></head> arasına CSS dosyanızı şu şekilde dahil eklemeniz gerekiyor:

<link rel="stylesheet" type="text/css" href="DOSYA_ADI.css">

Yok beceremedim, daha sakin kafayla denerim hocam. Sağ olasınız

Rica ederim

CSS kodlarını 2 şekilde HTML sayfalarına dahil edebiliyorsunuz.

1- HTML dosyasında <style></style> etiketleri arasına CSS kodu yazarak.
2- Harici bir .css uzantılı dosyayı HTML dosyasına dahil ederek (son ilettiğim <link rel="stylesheet" type="text/css" href="DOSYA_ADI.css"> şeklinde)