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

29-10-2023, 16:51:59

Misafir

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.

29-10-2023, 16:54:31

#2

hk1337

Platin üye

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>

29-10-2023, 16:55:06

#3

soykiran

HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>

<p>İçerik burada.</p>


<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;
}

29-10-2023, 17:05:22

#4

Misafir

@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

29-10-2023, 17:11:26

#5

hk1337

Platin üye

Misafir adlı üyeden alıntı: mesajı görüntüle

@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>

29-10-2023, 17:13:21

#6

Misafir

hk1337 adlı üyeden alıntı: mesajı görüntüle

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

<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>

<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?

29-10-2023, 17:15:59

#7

hk1337

Platin üye

Misafir adlı üyeden alıntı: mesajı görüntüle

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">

29-10-2023, 17:22:09

#8

Misafir

hk1337 adlı üyeden alıntı: mesajı görüntüle

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

29-10-2023, 17:24:38

#9

hk1337

Platin üye

Misafir adlı üyeden alıntı: mesajı görüntüle

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)