Başa Dön Butonu Oluşturma .Net

Merhaba,
Yeni yılın ilk yazısında web sitelerimizde uzun içerikler için başa dön butonu örneğine yer vereceğim.Kullanıcılar için özellikle oldukça kullanışlı bir özellik olacaktır ,sayfanızı ziyaret eden insanlar scrollbar ile yukarı çıkmaya çalışmayacaktır.

Görsel açıdan da oldukça güzel bulduğum bir örneği sizler ile paylaşmak istedim ,ingilizce, orjinal içerik için bu sayfayı ziyaret edebilirsiniz.Ben örneği biraz daha sadeleştirdim. Article on CodyHouse (http://codyhouse.co/gem/back-to-top)

Peki bu makaleyi okurken ne dinlemeliyim:

Şimdi basit bir web sitesi oluşturalım ve Default.aspx sayfasını yaratalım daha sonra ve css, js ,img klasörlerini oluşturacağız.

ve css,img ,js klasörlerini oluşturup sayfa sonunda yer alan tüm projenin yer aldığı css,js ve imajları bu klasörlere kopyalayalım. Daha sonra bu css ve javascripteri anlatmaya çalışacağım.

Default.aspx sayfamıza bir resim ve ardından uzun bir metin html 'i oluşturalım. Gerekli css ve js 'leri referans alalım.

<!DOCTYPE html>

<title>Back to Top Sample</title>

</head>

<body>

<div>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, quos, voluptate, sunt, in suscipit quibusdam quis dignissimos eligendi repellendus ipsam exercitationem adipisci nostrum fugit accusamus quae cum nisi accusantium eaque.

</p>

......

Yeterince uzun içeriğe sahip bir sayfa oluşturduktan sonra body tagından önce başa dön butonu olarak adlandıracağımız a elementini ve javascrpit'i referans alabiliriz.

minus, commodi, magni laborum doloribus libero ullam quos tenetur quis molestias ipsam consequuntur harum asperiores culpa nostrum omnis.

</p>

</div>

</form>

</body>

</html>

Css'i(style.css) açıklayacak olursak başa dön buton elementimizin css- class adının cd-top olduğunu düşünürsek style.css 'deki cd-top ile başlayan tüm css class'ları bu görsel element ile ilgilidir.En başta yer alan kısım(primary Style) sayfanın genel yapısı ile alakalı olup sayfa arka planı yazı rengi gibi görselleri biçimlemektedir. cd-top css class'ında background özelliğini değiştirerek back to top butonunumuzun rengini değiştirebiliriz. En altta yer alan iki class ise daha küçük ekranlar için nasıl gözükmesi istediğimize bağlı olarak düzenleyebileceğimiz class'lar dır. Visible ,fade-out fade-in hover classları ise sırasıyla ısrası ile back to top butonunun gözüküp gözükmemesi, görünürlüğünü kaybederken oluşan efekt, bu butonun üzerine gelince oluşan efekti sağlamaktadır.
img klasöründe yer alan svg dosyası ise buton içerisindeki beyaz yukarı oku sağlamaktadır .svg scalable vector graphic olduğu için bir resim kullanıp çözünürlüğünü ekrandan ekrana bozmak yerine svg kullanmak daha iyi olacaktır.
Şimdi js(main.js)'den bahsedelim.

jQuery(document).ready(function($){

// browser window scroll (in pixels) after which the "back to top" link is shown

var offset = 300,

//browser window scroll (in pixels) after which the "back to top" link opacity is reduced

offset_opacity = 1200,

//duration of the top scrolling animation (in ms)

scroll_top_duration = 700,

//grab the "back to top" link

$back_to_top = $('.cd-top');

//hide or show the "back to top" link

$(window).scroll(function(){

( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');

if( $(this).scrollTop() > offset_opacity ) {

$back_to_top.addClass('cd-fade-out');

}

});

//smooth scroll to top

$back_to_top.on('click', function(event){

event.preventDefault();

$('body,html').animate({

scrollTop: 0 ,

}, scroll_top_duration

);

});

Bu javascripte 300 px lik bir offset değeri belirlenmiş eğer bu değer scroll top değerinden büyük olursa demek ki kullanıcı sayfada aşağıya doğru ilerlemiş demektir,Scroll Top değerini javascript ile elde edebiliyoruz,özel bir çaba göstermemize gerek yok :) Bu işlemleri $(window).scroll(function() fonksiyonu içinde yapıyoruz aynı zamanda css 'i anlatırken de bahsettiğim classları back to top butonuna vererek hangisi gerekiyorsa (gözükmesi gerekiyorsa visible class'ını bu botona ekle gibi) gerekli görsel ayarlamaları yapıyoruz.

Başa dön butonuna bastığımızda sayfanın en başına çıkması için yazdığımız fonksiyon ise $back_to_top.on('click', function(event) bu fonksiyon bizi sayfanın en başına çıkarıyor, bunu scrollTop değerini 0 yaparak yapıyor.Projeyi tamamlayıp çalıştırdığımıda aşağı doğru scroll ettiğimizde koyu pembe renkli başa dön butonunun gözüktüğünü görebiliriz.

Projenin tam çalışır halini burada bulabilirsiniz.
Teşekkürler, sağlıkla ,huzurla kalın.

Author Description