Forum'da ara:
Ara


Yazar Mesaj
Mesaj25.12.2015, 07:14 (UTC)    
Mesaj konusu: Sayfa içi linkte kaydırarak aşağı inmek
Alıntıyla Cevap Gönder
Merhaba arkadaşlar, misal sitemiz index.html olsun. Baya uzun bi sayfa menüde bir şeye index.html#tarih şeklinde linkimiz var bunun yerine baya bir sayfa altında, ona direk gitmesi değilde kayarak gitmesini istiyorum. Sanırım jquery ile yapılıyor. Biraz araştırdım ama olumlu olmadı. Konu hakkında bilgi ve yardım eder misiniz?
↑
Mesaj25.12.2015, 07:32 (UTC)    
Mesaj konusu: Re: Sayfa içi linkte kaydırarak aşağı in
Alıntıyla Cevap Gönder
eduesto yazmış:
Merhaba arkadaşlar, misal sitemiz index.html olsun. Baya uzun bi sayfa menüde bir şeye index.html#tarih şeklinde linkimiz var bunun yerine baya bir sayfa altında, ona direk gitmesi değilde kayarak gitmesini istiyorum. Sanırım jquery ile yapılıyor. Biraz araştırdım ama olumlu olmadı. Konu hakkında bilgi ve yardım eder misiniz?


CSS ile "transition:1s;" gibi s'aniye ayarı yaparak hızını ayarlanabilir olduğunu düşünüyorum.
Menülerde de bu sistem kullanılır. Umarım işe yarar.
Kolay gelsin..
↑
Mesaj25.12.2015, 12:51 (UTC)    
Mesaj konusu:
Alıntıyla Cevap Gönder
Kaydırma scriptlerini denediniz mi? Örnek bir kaydırma scripti şu şekildedir:
Kod:
<script>
$('BAĞLANTININ YER ALDIĞI BÖLÜM ID'Sİ').click(function(){
   $('BAĞLANTI ID'Sİ').animate({scrollTop: $('BAĞLANTI ID'Sİ').height(SAYFA BAŞINA UZAKLIĞI) }, SÜRE);
});
</script>

Bu sadece örnek bir kodlama olmakla birlikte, daha ayrıntılı bilgi için jQuery scroll to element aramasına göz atabilirsiniz.
______________
↑
Mesaj25.12.2015, 18:44 (UTC)    
Mesaj konusu:
Alıntıyla Cevap Gönder
Öncelikle herkese teşekkür ederim. Birden fazla link için ayrı ayrı mı yapacağız
↑
Mesaj25.12.2015, 20:13 (UTC)    
Mesaj konusu:
Alıntıyla Cevap Gönder
İşin kolay yolu, linklere class tanımlamaları yaparak, tüm bu tanımlamalar için de script yazabilirsiniz. Diyelim ki sayfa içeriğinizde; en üstten alta doğru;
#tarih linkine etiket1 sınıflandırmasına sahip içerik
#mat linkine etiket2 sınıflandırmasına sahip içerik
1000px yüksekliğinde diğer sayfa içerikleri
1000px yüksekliğinde #tarih bölümü
1000px yüksekliğinde #mat bölümü olsun. Bu durumda sayfanızın şöyle bir CSS ve HTML kodlaması olabilir:
Kod:
<style>
.icerikler {
    background-color:#CCC;
    height:1000px;
}
#tarih {
    background-color:#000000;
    color:#ffffff;
    height:1000px;
}
#mat {
    background-color:#ffffff;
    color:#000000;
    height:1000px;
}
</style>

Kod:
<a href="#tarih" class="etiket1">Tarih Bölümüne Git</a>
<a href="#mat" class="etiket2">Mat Bölümüne Git</a>
<div class="icerikler">Sayfa içerisindeki içeriklerin burada olduğunu varsayalım. Ve burası da 1000px yüksekliğe sahip diyelim. Bunu CSS'de belirtiyorum.</div>
<div id="tarih">Tarihle ilgili içerikler burada.</div>
<div id="mat">Matematikle ilgili içerikler burada.</div>

Bu durumda asıl sorunuza gelecek olursak 2 içerik için de ayrı yüksekliklere sahip kaydırma işlemleri uygulamanız gerekmektedir. Yukarıda kullandığınız class tanımlaması bu noktada işinize yarayacaktır. Script dosyasını şu şekilde hazırlarsanız işleminiz sorunsuzca gerçekleşecektir.
Kod:
<script>
$(document).ready(function () {
    $('.etiket1').click(function () {
        $("html, body").animate({
            scrollTop: 1200
        }, 1000);
        return false;
    });
    $('.etiket2').click(function () {
        $("html, body").animate({
            scrollTop: 2200
        }, 1000);
        return false;
    });
});
</script>

NOT: 1200 ve 2200 kaydırma değerlerini; 1000 ise kaydırma işleminin ne kadar sürede yapılacağını belirtmektedir. Bunları site içeriklerinize göre değiştirebilirsiniz.
______________
↑
Önceki mesajları göster:   
  • 1. sayfa (Toplam 1 sayfa)

  •  
    • Geçiş Yap:  


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu

© 2024 webme GmbH, Almanya, Tüm hakları saklıdır.