Altın Konu JavaScript ve jQuery Kullanarak "En Üste Kaydır" Düğmesi Nasıl Oluşturulur?

Replicant · 29 Haz 2021

Görünümünüzü sayfanın en üstüne kolayca döndürmek için bir "yukarı kaydır" düğmesi kullanılır. Bu küçük UX özelliği, modern web sitelerinde çok yaygındır. Tek sayfalık uygulamalar gibi çok fazla içeriğe sahip web sayfaları için özellikle yararlıdır.

Bu makalede, JavaScript ve jQuery kullanarak yukarı kaydır düğmesinin nasıl oluşturulacağını öğreneceksiniz.

JavaScript Kullanarak Yukarı Kaydır Düğmesi Nasıl Oluşturulur?

scroll-to-top-button-using-javascript.pngq50fitcropw750dpr1.png

Aşağıdaki kod parçacığını kullanarak web sitenize bir yukarı kaydır düğmesi ekleyebilirsiniz:

Kod:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
 <meta charset="utf-8">
 <title>Scroll-to-Top button using JavaScript</title>
 <link href="https://fonts.googleapis.com/css?family=Quicksand:400,700" rel="stylesheet">
 <!-- BUTTON NEEDS FONT AWESOME FOR CHEVRON UP ICON, YOU CAN USE LATEST VERSION FOR MORE ICONS -->
 <!-- https://www.bootstrapcdn.com/fontawesome/ -->
 <link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
 <link rel="stylesheet" href="styles.css">
</head>
<body id="top">
 <h1>
 Scroll To Top
 </h1>
 <div class="long-text">
 <p>Scroll down to see the button.</p>
 <p>Click the button to see smooth scroll to top.</p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.<br><br>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.<br><br>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.<br><br>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.<br><br>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.<br><br>
 </div>
 <div id="scrolltop">
 <a class="top-button" href="#top"><i class="icon-chevron-up"></i></a>
 </div>
 <script type="text/javascript" src="script.js"></script>
</body>
</html>

Burada, kukla verilerle web sayfasının temel bir yapısı oluşturulur. Yalnızca yukarı kaydır düğmesine odaklanmanız gerekir.

Kod:

<div id="scrolltop">
 <a class="top-button" href="#top"><i class="icon-chevron-up"></i></a>
</div>

Yukarı kaydır düğmesi, #top kimliğini kullanarak sayfanın üstünü gösterir . #top kimliği olan <body> etiketinin. Yukarı kaydır düğmesinin simgesi, harika yazı tipi kullanılarak oluşturulur.

JavaScript Kodu

Kod:

// ===== Scroll to Top ====
const scrollTop = document.getElementById('scrolltop')
// When the page is loaded, hide the scroll-to-top button
window.onload = () => {
 scrollTop.style.visibility = "hidden";
 scrollTop.style.opacity = 0;
}
// If the page is scrolled more than 200px,
// display the scroll-to-top button
// Otherwise keep the button hidden
window.onscroll = () => {
 if (window.scrollY > 200) {
 scrollTop.style.visibility = "visible";
 scrollTop.style.opacity = 1;
 } else {
 scrollTop.style.visibility = "hidden";
 scrollTop.style.opacity = 0;
 }
};

Yukarı kaydır düğmesi, aşağıdaki koşullara göre görüntülenir ve gizlenir:

Sayfa yüklendiğinde, yukarı kaydır düğmesi gizlenir.
Sayfa 200 piksel kaydırılana kadar yukarı kaydırma düğmesi gizli tutulur. Pikselleri ihtiyacınıza göre değiştirebilirsiniz.

CSS Kodu

Kod:

html {
 scroll-behavior: smooth;
}
#scrolltop {
 display: block;
 visibility: visible;
 opacity: 1;
 transition: visibility 0s, opacity 0.5s ease-in;
 position: fixed;
 bottom: 20px;
 right: 20px;
 background: rgba(255, 255, 255, 0.4);
 border-radius: 20%;
}
.top-button {
 text-decoration: none;
 cursor: pointer;
 padding: 30px;
 color: #222;
}
body {
 background: linear-gradient(180deg, #0697f9 0%, #f898bf 100%);
 color: #fff;
 font-family: 'Quicksand', sans-serif;
 font-size: 24px;
 line-height: 1.4;
 text-align: center;
 padding: 40px;
}
.long-text {
 max-width: 700px;
 margin: 0 auto;
 padding: 40px;
 background: rgba(0, 0, 0, 0.2);
}

Yukarıdaki CSS, yukarı kaydır düğmesini ve web sayfasını biçimlendirmek için kullanılır. CSS ile oynayabilir ve düğmeyi ihtiyacınıza göre şekillendirebilirsiniz.

jQuery Kullanarak Yukarı Kaydır Düğmesi Nasıl Oluşturulur?

scroll-to-top-button-using-jquery.pngq50fitcropw750dpr1.png

Aşağıdaki kod parçacığını kullanarak web sitenize bir yukarı kaydır düğmesi ekleyebilirsiniz:

HTML Kodu

Kod:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
 <meta charset="utf-8">
 <title>Back to top button using jQuery</title>
 <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">
 <link rel="stylesheet" href="styles.css">
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
 <!-- Back to top button -->
 <a id="button"></a>

 <!-- Some content to fill up the page -->
 <div class="content">
 <h1>Back to Top Button</h1>
 <h3>Scroll down the page</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
 </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
 </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
 </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
 </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
 </p>
 </div>
 <script type="text/javascript" src="script.js"></script>
</body>
</html>

Burada, kukla verilerle web sayfasının temel bir yapısı oluşturulur. Yalnızca yukarı kaydır düğmesine odaklanmanız gerekir.

Kod:

<a id="button"></a>

Bu butona tıklandığında sayfa yukarı kaydırılır. Bu, jQuery kodunu ekledikten sonra işlevsel olacaktır.

jQuery Kodu

Kod:

// ===== Scroll to Top ====
var btn = $('#button');
// If the page is scrolled more than 300px,
// show the scroll-to-top button
// Otherwise hide the 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');
});

Burada, kullanıcı web sayfasında 300 pikselden fazla kaydırırsa , show sınıfı button öğesine eklenir. Bu gösteri sınıfı, düğme öğesini görünür kılar. Varsayılan olarak, düğme öğesinin görünürlüğü gizli tutulur. Düğme hakkında daha fazla ayrıntı aşağıdaki CSS kodundadır.

CSS Kodu

Kod:

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

Yukarıdaki CSS, yukarı kaydır düğmesini ve web sayfasını biçimlendirmek için kullanılır. CSS koduyla oynayabilir ve düğmeyi gereksinimlerinize göre şekillendirebilirsiniz.

Artık tamamen işlevsel bir yukarı kaydırma / başa dönme düğmesine sahipsiniz.

Kullanıcı Deneyimi Hakkında Daha Fazla Bilgi Edinin

Kullanıcı deneyimi, bir ürünün kullanıcılarının ihtiyaçlarını karşılayıp karşılamadığına odaklanır. Bir tasarımcı veya geliştiriciyseniz, UX tasarım ilkelerini takip edip harika ürünler yaratmanız iyi olur. Bu alan ilginizi çekiyorsa, başlamak için doğru yolu izlemelisiniz.

EsatOfficial · 6 Tem 2021

Eline Sağlık Kirvem

Replicant · 6 Tem 2021

EsatOfficial' Alıntı:
Eline Sağlık Kirvem

Rica ederim

Altın Konu JavaScript ve jQuery Kullanarak "En Üste Kaydır" Düğmesi Nasıl Oluşturulur?

Replicant

Ehlî olmuşum elemlerin

JavaScript Kullanarak Yukarı Kaydır Düğmesi Nasıl Oluşturulur?

JavaScript Kodu

CSS Kodu

jQuery Kullanarak Yukarı Kaydır Düğmesi Nasıl Oluşturulur?

HTML Kodu

jQuery Kodu

CSS Kodu

Kullanıcı Deneyimi Hakkında Daha Fazla Bilgi Edinin

EsatOfficial

Kara Gül ... 🥀

Replicant

Ehlî olmuşum elemlerin

Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)

Altın Konu JavaScript ve jQuery Kullanarak "En Üste Kaydır" Düğmesi Nasıl Oluşturulur?

Replicant

Ehlî olmuşum elemlerin

JavaScript Kullanarak Yukarı Kaydır Düğmesi Nasıl Oluşturulur?​

JavaScript Kodu​

​

CSS Kodu​

jQuery Kullanarak Yukarı Kaydır Düğmesi Nasıl Oluşturulur?​

HTML Kodu​

jQuery Kodu​

CSS Kodu​

Kullanıcı Deneyimi Hakkında Daha Fazla Bilgi Edinin​

EsatOfficial

Kara Gül ... 🥀

Replicant

Ehlî olmuşum elemlerin

Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)

JavaScript Kullanarak Yukarı Kaydır Düğmesi Nasıl Oluşturulur?

JavaScript Kodu

CSS Kodu

jQuery Kullanarak Yukarı Kaydır Düğmesi Nasıl Oluşturulur?

HTML Kodu

jQuery Kodu

CSS Kodu

Kullanıcı Deneyimi Hakkında Daha Fazla Bilgi Edinin