Home-theater-designers
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.
geçici internet hizmeti nasıl alını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
Aşağıdaki kod parçacığını kullanarak web sitenize bir yukarı kaydır düğmesi ekleyebilirsiniz:
HTML Kodu
Scroll-to-Top button using JavaScript
Scroll down the page
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.
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.
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.
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.
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.
Burada, kukla verilerle web sayfasının temel bir yapısı oluşturulur. Yalnızca yukarı kaydır düğmesine odaklanmanız gerekir.
Bu butona tıklandığında sayfa yukarı kaydırılır. Bu, jQuery kodunu ekledikten sonra işlevsel olacaktır.
jQuery Kodu
İlgili: jQuery'de Element Oluşturmayı Öğrenin
// ===== 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, göstermek kullanıcı web sayfasında 300 pikselden fazla kaydırırsa, button öğesine class eklenir. Bu göstermek class, button öğ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
İlgili: 10 Dakikada Öğrenebileceğiniz Basit CSS Kod Örnekleri
#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. Bu makalede kullanılan kaynak kodun tamamına bir göz atmak isterseniz, işte size GitHub deposu aynı.
Not : Bu makalede kullanılan kod MIT Lisanslı .
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.
safeline geçerli bir ip yapılandırmasına sahip değilPaylaş Paylaş Cıvıldamak E-posta UX Tasarımcısı Olmak İster misiniz? İşte Nasıl Başlayacağınız
Yazılım kullanıcısının ihtiyaçlarının karşılandığından ve süreçten memnun olduklarından emin olmak UX Tasarımcısının işidir.
Sonrakini Oku İlgili konular- Programlama
- JavaScript
- jQuery
Yuvraj, Hindistan Delhi Üniversitesi'nde Bilgisayar Bilimleri lisans öğrencisidir. Full Stack Web Geliştirme konusunda tutkulu. Yazmadığı zamanlarda farklı teknolojilerin derinliğini keşfediyor.
Yuvraj Chandra'dan Daha FazlaHaber bültenimize abone ol
Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!
Abone olmak için buraya tıklayın