Sayfa yüklenirken kimliğe kaydırmayı canlandırın

123

Sayfanın yüklenmesinde belirli bir kimliğe doğru kaydırmayı canlandırıyorum. Çok araştırma yaptım ve şununla karşılaştım:

$("html, body").animate({ scrollTop: $('#title1').height() }, 1000);

ancak bu kimlikten başlayıp sayfanın üst kısmına doğru hareket ediyor gibi görünüyor?

HTML (sayfanın yarısına kadar olan) basitçe:

<h2 id="title1">Title here</h2>

jquery scroll jquery-animate

— Adi
kaynak

1

Bu pek bir cevap değil, ancak Ariel Flesler'in "scrollTo" eklentisini şiddetle tavsiye ediyorum; bir sayfada gezinmek için birçok özelliğe ve yaygın durumlar için eklentiye birkaç uzantıya sahiptir (örneğin, "LocalScroll" eklentisini, aynı sayfadaysa bir bağlantının href'ine kaydırmak için yararlı bulabilirsiniz). Eklentiyi buradan edinebilirsiniz: flesler.blogspot.com/2007/10/jqueryscrollto.html

— Faisal

327

Yalnızca öğenizin yüksekliğini kaydırıyorsunuz. offset () , belgeye göre bir öğenin koordinatlarını döndürür ve topparam, öğenin y ekseni boyunca piksel cinsinden mesafesini verir:

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

Ayrıca buna bir gecikme de ekleyebilirsiniz:

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

— BumbleB2na
kaynak

1

Otomatik kaydırmayla ilgili beni "WOW COOL !!" konumuna getiren şey nedir? Belki de çözümünüzün basitliğidir.

— theblang

Sayfa yüklemesinde bir öğeyi görünüme kaydırmam gerekiyordu, ancak iki sorunla karşılaştım: a) "html, body" kullanmak iki geri çağırma verdi (her eşleşen öğe için bir tane). b) Hangi gövde veya html'nin çalıştığı tarayıcıya bağlıdır. Bu yüzden, "herhangi bir" tarayıcıda görünüme kaydırın çalışmasını sağlamak için projenizde kullanmak üzere uyarlayabileceğiniz ve animasyon bittiğinde yalnızca bir geri arama alacağınız bir özet yaptım. gist.github.com/netsi1964/4ddffe1ae14e05220d25

— Netsi1964

2

Bu gerçekten doğru değil. Gerçekten yapmaya çalıştığımız gövde veya öğenin mevcut kaydırma konumunu dikkate almalısınız scroll. Akılda Eğer geçerli kaydırma konumunu eklersiniz önüne aldığımızda bodyiçin offset().topbiz görünümde istediğiniz elemanın pozisyonu, ortaya çıkan toplamı biz ilerleyin istiyoruz değerdir. $('html, body').animate({ scrollTop: ($('html, body').scrollTop() + $('#title1').offset().top) }, 1000);

— mattdevio

@magreenberg bunu denedin mi? Mevcut kaydırma konumu 0 değerinin üzerinde bir şeyse, önerdiğiniz şey çalışmayabilir. Kaydırılabilir konteynerin 1000 piksel uzunluğunda ve mevcut kaydırma konumunun 1000'de olduğunu varsayalım. Kaydırdığınız öğenin dikey merkezde 500'de oturduğunu varsayalım. Önerdiğiniz şey ona 1500'e kaydırmasını söyleyecektir. , sağ?

— BumbleB2na

@ BumbleB2na .offset().topbu durumda size negatif bir sayı verecektir. Ve bu gerçekten sadece işe yarar bodyve htmlçünkü offset().topsize belge üst ofsetini verir, amaçlanan kaydırma üst kenarını değil.

— mattdevio

12

ScrollIntoView () işlevine sahip saf javascript çözümü :

document.getElementById('title1').scrollIntoView({block: 'start', behavior: 'smooth'});

<h2 id="title1">Some title</h2>

Snippet'i genişlet

PS 'smooth' parametresi artık yorumlarda belirtildiği gibi julien_c'de Chrome 61'den çalışıyor .

— Vladimir Vovk
kaynak

1

Şimdi çalışıyor (Chrome 61'den)

— julien_c

Tarayıcı uyumluluğunu kontrol ettiğinizden emin olun. 10/2018 IE (11) itibarıyla, Edge ve Safari "scrollIntoView" u destekler ancak "sorunsuz" seçeneğini desteklemez.

— metal_jacke1

Saf JS ftw. Bu pasaj için teşekkürler! Çift tereyağlı krema kadar pürüzsüz

— jean d'arme

4

$(jQuery.browser.webkit ? "body": "html").animate({ scrollTop: $('#title1').offset().top }, 1000);

jquery-animate-body-for-all-tarayıcılar .

— AleX gri
kaynak

3

Bunun için bir jquery eklentisi var. Belgeyi, görüntü alanının tam ortasında olması için belirli bir öğeye kaydırır. Ayrıca, kaydırma efektinin süper pürüzsüz görünmesi için animasyon yumuşatmalarını da destekler. Bu bağlantıyı kontrol edin .

Sizin durumunuzda kod

$("#title1").animatedScroll({easing: "easeOutExpo"});

— Eugene Tiurin
kaynak

"Ayrıca, kaydırma efektinin süper pürüzsüz görünmesi için animasyon yumuşatmalarını da destekler" Maalesef bu doğru değil. Bilgisayar herhangi bir nedenle yavaşsa, aslında düzgün hareket etmeden atlamaya devam eder.

— brunoais

Düzgün kaydırma, hesaplanacak çok piksel gerektirir. Elbette yavaş bir "bilgisayar" (daha fazla GPU) bunu yapamaz, ancak yeterli ALU eksikliğinden dolayı. Yani genel olarak haklıdır. Ve gerçekten kolay kaydırmalı kitap.

— Roland

1

aşağıdaki kodu deneyin. sınıf adı ile elemanlar oluşturun, sayfa kaydırın ve hrefilgili bağlantıların id adını tutun

$('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: ($($anchor.attr('href')).offset().top - 50)
        }, 1250, 'easeInOutExpo');
        event.preventDefault();
    });

— Akhil
kaynak

-3

basit Kaydırma için aşağıdaki stili kullanın

yükseklik: 200px; taşma: kaydırma;

ve kaydırmak istediğiniz bölmeyi veya bölümü bu stil sınıfını kullanın

— aa
kaynak