JQuery $ .scrollTo () işlevi kullanılarak pencere nasıl kaydırılır

98

Kullanıcı belgenin üstüne her yaklaştığında 100px aşağı kaydırmaya çalışıyorum.

Kullanıcı belgenin üst kısmına yaklaştığında çalışan işlevi görüyorum, ancak .scrollTo işlevi çalışmıyor.

Hattın gerçekten hat olup olmadığını kontrol etmek için sonrasına ve öncesine bir uyarı koydum ve sadece ilk uyarı sönüyor, işte kod:

alert("starting");
$.scrollTo({ top: '+=100px', left: '+=0px' }, 800);
alert("finished");

Jquery sayfamın doğru bir şekilde bağlandığını biliyorum çünkü diğer birçok jquery işlevini kullanıyorum ve hepsi iyi çalışıyor. Ayrıca 'piksel'i yukarıdan kaldırmayı denedim ve bir fark yaratmıyor gibi görünüyor.

3

Jquery'nin kendisi iyi çalışıyor, ancak scrollTo eklentisinin doğru şekilde bağlandığından emin misiniz? Bu uyarılardan birini uyarı olarak değiştirin ($. ScrollTo);

— Andrew

97

Çalışmıyorsa neden jQuery'nin scrollTop yöntemini kullanmayı denemiyorsunuz?

$("#id").scrollTop($("#id").scrollTop() + 100);

Sorunsuz bir şekilde kaydırmak istiyorsanız, belirli bir süre boyunca 1 piksellik artışlarla kaydırmak için temel javascript setTimeout / setInterval işlevini kullanabilirsiniz.

— Fermin
kaynak

8

Tek bir öğeyi değil de tüm sayfayı kaydırmak istiyorsanız, Tim'in burada işaret ettiği gibi $ ('html, body') kullanın . Sadece $ ['body') tüm tarayıcılarda çalışmayacaktır.

— ben--

322

$('html, body').animate({scrollTop: $("#page").offset().top}, 2000);

— Mihai
kaynak

19

İnsanların scrollTop için neden sadece 'html' yerine 'html, body' kullandıklarını sık sık merak etmişimdir. Bununla ilgili herhangi bir fikrin var mı?

— Scott Greenfield

+1 benim için çalıştı;) html, bodySadece html yerine nedenini bilmekle de ilgileniyorum.

— Kato

9

@ScottGreenfield, @Kato: neden olduğundan emin değilim, ancak bu yorum dahil edilmediğini söylüyor bodyChrome 4'te bunu bozuyor: stackoverflow.com/questions/1890995/…

— Yuji 'Tomita' Tomita

scrollTop: 0ayrıca iyi çalışıyor. Ancak süre azalır. 1000 hıza ayarlanırsa iyi çalışıyor

— shashwat

Bu, eksiksiz bir yöntem eklemek isteyene kadar iyi bir çözümdür - iki kez çalıştırılacaktır. @complistic'in çözümü daha zariftir ve bunu önleyecektir.

— plankguy

41

jQuery artık scrollTop'u animasyon değişkeni olarak destekliyor.

$("#id").animate({"scrollTop": $("#id").scrollTop() + 100});

Sorunsuz bir şekilde kaydırmak için artıkTimeout / setInterval ayarlamanıza gerek yok.

— Todd
kaynak

Bazı sözdizimi hataları var - kapanışınız eksik {. Aksi takdirde bu iyi bir noktadır.

— Joshua

1

Bunun $("#id").offset().topyerine mi olmalı ?

— codeulike

15

Etrafında almak için htmlvs bodysorunu, ben çağırmadan doğrudan ziyade css animasyon vermeyerek bu sabit window.scrollTo();her adım:

$({myScrollTop:window.pageYOffset}).animate({myScrollTop:300}, {
  duration: 600,
  easing: 'swing',
  step: function(val) {
    window.scrollTo(0, val);
  }
});

Bu, tarayıcılar arası JavaScript kullandığı için herhangi bir yenileme sorunu olmadan güzel bir şekilde çalışır.

JQuery'nin animasyon işlevi ile neler yapabileceğiniz hakkında daha fazla bilgi için http://james.padolsey.com/javascript/fun-with-jquerys-animate/ adresine bir göz atın .

— karmaşık
kaynak

1

Bu harika. Yalnızca ve olarak değiştirdim window.pageYOffset, bu yüzden tarayıcı uyumluluğu konusunda endişelenmeme gerek yok. $(window).scrollTop()window.scrollTo(0, val)$(window).scrollTop(val)

— leftclickben

1

JQuery'nin animasyon yöntemine böyle bir nesne geçirmeyi hiç düşünmemiştim. Pek çok olası kullanım. Bu çözüm harika, teşekkürler.

— Synexis

Evet, teknik önemli bir katkıdır. Daha önce doğrudan "window.scrollTo ()" kullanarak tarayıcı sorunlarını çözmüştü, ancak bu "tam" bir geri aramaya veya bir söze izin vermiyordu. Bu çözüm için @ complistic'e teşekkür ederiz. Ayrıca @leftclickben'e teşekkür ederim; Onun varyasyonunu ".scrollTop ()" kullanarak gerçekleştirdim. Ayrıca, bağlantı başına "james.padolsey" makalesi kısa ve okunmaya değer bir makaledir.

— IAM_AL_X

"Window.scrollTo ()" nun tüm modern tarayıcılarla uyumlu olması gerektiğini düşünüyorum.

— IAM_AL_X

7

Görünüşe göre sözdizimi biraz yanlış ... Kodunuza göre 800 ms'de 100 piksel aşağı kaydırmaya çalıştığınızı varsayıyorum, eğer öyleyse bu çalışır (scrollTo 1.4.1'i kullanarak):

$.scrollTo('+=100px', 800, { axis:'y' });

— Alconja
kaynak

6

Aslında bir şey

function scrollTo(prop){
    $('html,body').animate({scrollTop: $("#"+prop).offset().top +
 parseInt($("#"+prop).css('padding-top'),10) },'slow');
}

güzel çalışacak ve dolguyu destekleyecektir. Ayrıca marjları kolayca destekleyebilirsiniz - tamamlanması için aşağıya bakın

function scrollTo(prop){
    $('html,body').animate({scrollTop: $("#"+prop).offset().top 
+ parseInt($("#"+prop).css('padding-top'),10) 
+ parseInt($("#"+prop).css('margin-top'),10) +},'slow');
}

— Tim
kaynak