Soru jQuery öğeye ilerleyin


bu bende var input öğe:

<input type="text" class="textfield" value="" id="subject" name="subject">

Sonra diğer metin girişleri, textareas vb. Gibi başka öğelerim var.

Kullanıcı bunu tıkladığında input ile #subjectsayfa güzel bir animasyonla sayfanın son öğesine kaydırılmalıdır. Aşağıya kaydırılmalı ve üstüne kaydırılmamalıdır.

Sayfanın son maddesi submit düğmesiyle #submit:

<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">

Animasyon çok hızlı olmamalıdır ve sıvı olmalıdır.

En son jQuery sürümünü çalıştırıyorum. Herhangi bir eklenti yüklememeyi tercih ediyorum ancak bunu elde etmek için varsayılan jQuery özelliklerini kullanıyorum.


1875
2017-07-13 09:49


Menşei




Cevaplar:


Kimliğine sahip bir düğmeniz olduğunu varsayalım button, bu örneği deneyin:

$("#button").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

Makaleden kodu aldım JQuery eklentisi olmadan bir öğeye kolayca kaydırın. Ve aşağıdaki örnekte test ettim.

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function (){
            $("#click").click(function (){
                $('html, body').animate({
                    scrollTop: $("#div1").offset().top
                }, 2000);
            });
        });
    </script>
    <div id="div1" style="height: 1000px; width 100px">
        Test
    </div>
    <br/>
    <div id="div2" style="height: 1000px; width 100px">
        Test 2
    </div>
    <button id="click">Click me</button>
</html>


3481
2017-07-13 09:52



Bu her durumda çalışmayacak. Görmek stackoverflow.com/questions/2905867/... - Jānis Elmeris
@BarryChapman tam olarak değil. Googling ettikten sonra buldum buBu nedenle, her tarayıcı türü için ekstra bir mantık istemiyorsanız, her iki etiket gereklidir. - s3m3n
Animasyon istemiyorsanız ve bunun yerine öğeye anında atlamak istiyorsanız .scrollTop(…) yerine .animate({scrollTop: …}, …). - Rory O'Kane
Çözümünüze ek olarak (harika çalışır), URL'ye hashtag ekleyen tam bir işlev ekleyebilirsiniz. Bu durumda, scrollTo zaten doğru konuma kaydırılmış olduğundan ve bir kullanıcı URL'yi kopyalarsa, sayfadaki doğru yere otomatik olarak ekleneceğinden, kaydırmaz. - Sander
Animasyon tamamlandığında bir geri arama kullanırsanız ve geri çağırma işlemi bu çözümle iki kez tetiklendiğini fark ederseniz, "$ ('html body')." $ ('html, body') yerine animate (... ") kullanmayı deneyin. .animate (... "virgül, html, body için bir tane olmak üzere iki canlandırma etkinliği yarattı. Gerçekten sadece html gövdesi için bir tane istiyorsun Teşekkürler @TJ Crowder stackoverflow.com/questions/8790752/... - BoatCode


  jQuery .scrollTo() Method 

jQuery .scrollTo ():  Görünüm - Demo, API, Kaynak

Sayfayı / öğeyi daha kolay kaydırmak için bu hafif eklentiyi yazdım. Bir hedef öğede veya belirli bir değerde geçebileceğin esnek. Belki de bu jQuery'nin bir sonraki resmi sürümünün bir parçası olabilir, sizce ne düşünüyorsunuz?


Örnekler Kullanım:

$('body').scrollTo('#target'); // Scroll screen to target element

$('body').scrollTo(500); // Scroll screen 500 pixels down

$('#scrollable').scrollTo(100); // Scroll individual element 100 pixels down

Seçenekler:

scrollTarget: İstenilen kaydırma konumunu gösteren bir öğe, dize veya sayı.

offsetTop: Kaydırma hedefinin üzerinde ek boşlukları tanımlayan bir sayı.

süre: Animasyonun ne kadar süreceğini belirleyen bir dize veya sayı.

hafifletilmesi: Geçiş için kullanılacak işlevi azaltan bir dize.

tamamlayınız: Animasyon tamamlandığında çağırmak için bir işlev.


454
2017-10-05 08:50



Demo, krom üzerinde çalışmıyor - alex
Krom hakkında güncel bir güncellemeye kadar çalışıyordu. Şu anda kullanmakta olduğum bir sürümü var (eğer denemek istiyorsanız) memoryboxweddings.com/photography-posts. Düzeltildikten sonra bir güncelleme gönderirim. - Timothy Perez
@TimothyPerez: Bunun ticari kullanım için izin veren bir şey ifade ettiğinden eminim? Eminim ki, bu kod parçasını sadece kendi web sitelerinde herhangi bir yerde kullanmak isteyen ve gece bu kadar kolay uyumalarına yardımcı olacak pek çok insan var. Belki MIT lisansı gibi bir şey ihtiyaçlarınızı karşılayabilir mi? en.wikipedia.org/wiki/MIT_License - Robert Massaioli
$ ('vücut') FF'de işe yaramadı, bu yüzden çalışan $ ('html, body') çalıştı. - kiranvj
Bu komut dosyası kaynağına ihtiyaç varsa, o zaman buradan alabilirsiniz flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js - Arturs


Pürüzsüz kaydırma efekti ile çok ilgilenmiyorsanız ve sadece belirli bir öğeye kaydırma yapmak istiyorsanız, bunun için jQuery işlevine gerek yoktur. Javascript'in davanız kapandı:

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView

Yani tek yapmanız gereken: $("selector").get(0).scrollIntoView(); 

.get(0) JavaScript'in DOM öğesini almak istediğimizden ve JQuery'nin DOM öğesinden değil, çünkü kullanılır.


271
2017-12-24 11:35



Teşekkürler, JavaScript ve JQuery'nin DOM öğesi arasındaki farkı verebilir misiniz. - Francisco Corrales Morales
Sen de kullanabilir misin $(selector)[0]? - RobW
RobW, evet sadece [0] 'ı kullanabilirsiniz, ancak (0) undefined veya negatif dizinlere karşı sizi koruyabilirsiniz. Kaynağa bakın: james.padolsey.com/jquery/#v=1.10.2&fn=jQuery.fn.get - corbacho
JQuery'yi kullanmak istemezseniz, sadece kullanın document.getElementById('#elementID').scrollIntoView(). Sadece bir öğe seçmek için bir ~ 100k kitaplığı yükleme kullanmayın ve sonra normal JavaScript'e dönüştürün. - Gavin
@Gavin Emin olmak istediğine eminim: document.getElementById('elementID').scrollIntoView() - Brian


Kontrol et ScrollTo Eklenti. Demoyu görebilirsiniz İşte.

Umut ediyorum bu yardım eder.


42
2017-07-13 11:05



Bence TimothyPerez'in eklentisinin y ekseni ile sınırlandırıldığına dikkat çekerken, Ariel Flesler'in (bu cevaba bağlı olarak) hem x'i hem de y kaydırmayı destekleyen bir mutfak lavabosu olduğunu, örneğin bir modal diyalogun olduğu zaman göz önünde bulundurulması önemli olabilir. mobil cihazlarda veya geniş bir tablonun belirli bir kısmına veya mobil cihazdaki forma dikkat çekerek. - Chris Moschini


jQuery(document).ready(function($) {
  $('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash,
        $target = $(target);

    $('html, body').stop().animate( {
      'scrollTop': $target.offset().top-40
    }, 900, 'swing', function () {
      window.location.hash = target;
    } );
  } );
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul role="tablist">
  <li class="active" id="p1"><a href="#pane1" role="tab">Section 1</a></li>
  <li id="p2"><a href="#pane2" role="tab">Section 2</a></li>
  <li id="p3"><a href="#pane3" role="tab">Section 3</a></li>
</ul>

<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>


26
2017-07-18 18:06





Bu basit komut dosyasını kullanma

if($(window.location.hash).length > 0){
        $('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
}

URL'de bir karma etiketi bulunursa, scrollTo uygulamasının kimliğe animasyon yapmasını sağlayın. Hash etiketi bulunamadıysa, komut dosyasını yoksayın.


26
2017-09-05 11:53





Steve ve Peter'ın çözümü çok iyi çalışıyor.

Ancak bazı durumlarda, değeri bir tam sayıya dönüştürmeniz gerekebilir. Garip, gelen değer $("...").offset().top bazen float.
kullanın: parseInt($("....").offset().top)

Örneğin:

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: parseInt($("#elementtoScrollToID").offset().top)
    }, 2000);
});

15
2018-02-06 15:39





"Canlı" çözümün kompakt bir versiyonu.

$.fn.scrollTo = function (speed) {
    if (typeof(speed) === 'undefined')
        speed = 1000;

    $('html, body').animate({
        scrollTop: parseInt($(this).offset().top)
    }, speed);
};

Temel kullanım: $('#your_element').scrollTo();


15
2017-08-29 11:19





Sadece bir giriş öğesine kaydırmayı kullanıyorsanız, kullanabilirsiniz focus(). Örneğin, ilk görünür girişe geçmek istediğinizde:

$(':input:visible').first().focus();

Veya sınıfla birlikte bir kaptaki ilk görünür girdi .error:

$('.error :input:visible').first().focus();

Sayesinde Tricia Ball Bunu işaret ettiğin için!


12
2018-01-28 17:00





İle bu çözüm herhangi bir eklentiye ihtiyacınız yok ve kurulum gerektirmez komut dosyasını kapanışınızdan önce yerleştirme </body> etiket.

$("a[href^='#']").on("click", function(e) {
  e.preventDefault();
  $("html, body").animate({
    scrollTop: $($(this).attr("href")).offset().top
  }, 1000);
});

if ($(window.location.hash).length > 1) {
  $("html, body").animate({
    scrollTop: $(window.location.hash).offset().top
  }, 1000);
}

Yükte, adreste bir karma varsa, ona ilerleriz.

Ve - bir tıkladığınızda a ile bağlantı href hash, ör. #top, ona kaydırıyoruz.


11
2017-08-02 23:09



Bu muhtemelen olmalı > 1 yerine 0çünkü /# bu betiğin kırılmasına neden oluyor - Tallboy
Bağlantılar zayıf bir şekilde oluşturulmadıkça, ancak teknik olarak TY, bir karma karma URL ile bitmemelisiniz. (Bu kodun kendi versiyonumun zaten bu pakete dahil edilmiş olmasına rağmen) - Jonathan
Bu kod ile ilişkili bir jitter var, ancak kolayca düzeltilebilir. Gerek return false; varsayılan eylemi engellemek için on tıklama etkinliğinin sonunda - hemen bağlantı noktasına kaydırma - olmaktan. - roncli
@roncli iyi bir nokta - alternatif olarak sadece yapabilirsin e.preventDefault(); - Jonathan


Çoğu durumda, bir eklenti kullanmak en iyisidir. Ciddi anlamda. Ben gidiyorum benimki benim. Elbette başkaları da var. Ancak, ilk etapta bir eklenti olmasını istediğiniz tuzaklardan gerçekten uzak olup olmadıklarını kontrol edin - hepsi değil.

Bir eklenti kullanmanın nedenleri hakkında yazdım başka yerde. Özetle, burada en fazla cevabı destekleyen bir astar var.

$('html, body').animate( { scrollTop: $target.offset().top }, duration );

kötü UX.

  • Animasyon, kullanıcı eylemlerine yanıt vermiyor. Kullanıcı tıklar, tıklar veya kaydırmaya çalışsa bile devam eder.

  • Animasyonun başlangıç ​​noktası hedef öğeye yakınsa, animasyon ağrılı bir şekilde yavaştır.

  • Hedef eleman sayfanın altına yakın yerleştirilirse, pencerenin üstüne kaydırılamaz. Kaydırma animasyonu, ani hareket halinde aniden durur.

Bu sorunları çözmek için (ve başkalarının demet), benim bir eklenti kullanabilirsiniz jQuery.scrollable. Çağrı daha sonra olur

$( window ).scrollTo( targetPosition );

ve bu kadar. Tabii ki var Daha fazla seçenek.

Hedef konum ile ilgili olarak, $target.offset().top çoğu durumda iş yapar. Ancak lütfen iade edilen değerin html eleman hesaba katılacak (bu demoya bak). Herhangi bir koşulda doğru olmak için hedef pozisyona ihtiyacınız varsa, kullanmak daha iyidir

targetPosition = $( window ).scrollTop() + $target[0].getBoundingClientRect().top;

Üzerinde bir sınır olsa bile çalışır html eleman ayarlandı.


7
2017-08-17 09:18