Öğenin içine veya öğenin herhangi bir yerine içinde div ID

öğesini tıklattırarak sayfayı sayfanın üstüne kaydırın. Gezinme div kimliğinin içindeki herhangi bir bağlantıyı veya (mümkünse) navigasyon bağlantılarını içeren div kimliğinin herhangi bir yerine tıkladığınızda navigasyon div kimliği.Öğenin içine veya öğenin herhangi bir yerine içinde div ID

Bunu araştırdım ve en yakın olduğum nokta jQuery - How to scroll an anchor to the top of the page when clicked?'dur, ancak bazı nedenler benim örneğimde bunu yapmaya çalıştığımda işe yaramaz. Neyi yanlış yapıyorum?

jQuery ve html ve css ortamında orta (ve yalnızca örnek için ayrı bir css sağlamak istemediğim için satır içi satır içi stilini kullandım).

Aptana'da html ve komut dosyasını jQuery - How to scroll an anchor to the top of the page when clicked?'dan yüklediğimde, kaydırma yapmaz. Div sınıfının üstündeki bir içerik div ile bile çalışacak şekilde kaydırın.

Tam olarak ne demek istediğimi açıklamak için ilgili bölümlerin içine iki küçük paragraf ekledim.

Her türlü yardım çok takdir edilmektedir. Teşekkür ederim. Firefox'ta scrollTop kullanırken

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

<script> 
     $('#scroll_navigation ul li').click(function() { 
      $('html,body').animate({scrollTop: $(this).offset().top}, 800); 
     }); 
    </script> 

<body> 

<div id="logo" style="margin: 0 auto; height: 300px; width: 60%; border: 1px solid #000">Logo</div> 

    <div id="scroll_navigation" style="margin: 0 auto; width: 40%; border: 4px solid #225599"> 

     <p>Scroll navigation to top of page</p> 
     <p>Catch any clicks in "#scroll_navigation" to scroll the div id to the top of the page</p> 


      <div id="navigation"> 

       <div class="container" style="margin: 0 auto; height: 220px; width: 60%; border: 1px solid #000"> 

        <ul> 
         <p>Catch clicks on anchors to scroll the div id to the top of the page</p> 
         <li><a href="#Portfolio" title="">Portfolio</a></li> 
         <li><a href="#Services" title="">Services</a></li> 
         <li><a href="#About" title="">About</a></li> 
         <li><a href="#Contact" title="">Contact</a></li> 
        </ul> 

       </div> 

      </div> 

    </div> 

<div id="content" style="margin: 0 auto; height: 1500px; width: 60%; border: 1px solid #000">Content</div> 

</body>

DÜZENLEME bu sakının. Animate scrollTop not working in firefox jQuery scrollTop - no support for negative values in Mozilla/Firefox Kodumu anlamak için biraz zaman harcadım ama FF'de bu sorun scrollTop oldu. Aynı örnekte davranış da gözlenebilir. Aşağı doğru ilerlerken ve ankrajları sabitlerken FF, hedef divtan önce veya sonra rastgele pozisyonlara 2-4px kayar.

Artık büyük tarayıcılarda istenen noktalara mükemmel bir kaydırma sağlamak için Scrolld.js'yi kullanıyorum. Farklı tarayıcı motorlarının, anladığım kadarıyla (html veya body) girdilerden scrollTop gibi yaygın bir şeyi nasıl işleyebildiğini ve jQuery için yeni bir şey oluşturduğunu anlamıyorum. Bu jQuery "hata" değil, tarayıcı motorları scrollTop nasıl render sanırım.

kaynak

2013-10-13 moderntimes

Bunu yapıp yapmadığınızı bilmiyorum, ancak bunu kullanmak için jquery eklemelisiniz.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script> 

$(document).ready(function(){ 
    $('#scroll_navigation ul li').on('click', function(){ 
     $('html,body').animate({scrollTop: $(this).offset().top}, 800); 
    }); 
}); 

</script>

kaynak

2013-10-13 23:55:24 lexith

Çalışıyor: Başka bir şey senin "dinleyici tıkla" yapmak olacağını jqueries olmak zorunda böyle hazır fonksiyon belgelemek! Çok teşekkür ederim! Sadece istediğimi istiyorum. Evet, jQuery'yi dahil ettim, ancak belgenin hazır fonksiyonunda olması gerektiğini bilmiyordum. – moderntimes

Öğenin içine veya öğenin herhangi bir yerine içinde div ID

cevap

İlgili konular