Pertanyaan jQuery gulir ke elemen


aku punya ini input elemen:

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

Kemudian saya memiliki beberapa elemen lain, seperti input teks lainnya, textareas, dll.

Ketika pengguna mengklik itu input dengan #subject, halaman harus bergulir ke elemen terakhir halaman dengan animasi yang bagus. Ini harus menjadi gulir ke bawah dan tidak ke atas.

Item terakhir dari halaman adalah a submit tombol dengan #submit:

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

Animasi tidak boleh terlalu cepat dan harus cair.

Saya menjalankan versi jQuery terbaru. Saya lebih memilih untuk tidak menginstal plugin apa pun tetapi menggunakan fitur jQuery default untuk mencapai ini.


1871
2017-07-13 09:49


asal


Jawaban:


Dengan asumsi Anda memiliki tombol dengan id button, coba contoh ini:

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

Saya mendapat kode dari artikel itu Lancar gulir ke elemen tanpa plugin jQuery. Dan saya telah mengujinya pada contoh di bawah ini.

<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>


3478
2017-07-13 09:52



  jQuery .scrollTo() Method 

jQuery .scrollTo ():  Lihat - Demo, API, Sumber

Saya menulis ini plugin ringan untuk membuat halaman / elemen bergulir jauh lebih mudah. Ini fleksibel di mana Anda bisa lulus dalam elemen target atau nilai yang ditentukan. Mungkin ini bisa menjadi bagian dari rilis resmi jQuery berikutnya, bagaimana menurut Anda?


Contoh Penggunaan:

$('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

Pilihan:

scrollTarget: Unsur, string, atau angka yang menunjukkan posisi gulir yang diinginkan.

offsetTop: Angka yang menentukan jarak tambahan di atas target gulir.

lamanya: String atau nomor yang menentukan berapa lama animasi akan berjalan.

pelonggaran: String yang menunjukkan fungsi pelonggaran mana yang digunakan untuk transisi.

lengkap: Fungsi untuk memanggil setelah animasi selesai.


453
2017-10-05 08:50



Jika Anda tidak terlalu tertarik pada efek gulir halus dan hanya tertarik untuk menggulir ke elemen tertentu, Anda tidak memerlukan fungsi jQuery untuk ini. Javascript telah menyelesaikan kasus Anda:

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

Jadi yang perlu Anda lakukan hanyalah: $("selector").get(0).scrollIntoView(); 

.get(0) digunakan karena kami ingin mengambil elemen DOM JavaScript dan bukan elemen DOM JQuery.


267
2017-12-24 11:35



Lihat ScrollTo plugin. Anda dapat melihat demo sini.

Saya harap itu membantu.


42
2017-07-13 11:05



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



Menggunakan skrip sederhana ini

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

Akan membuat semacam bahwa jika tag hash ditemukan di url, scrollTo animate ke ID. Jika tidak ditemukan tag hash, abaikan skrip.


26
2017-09-05 11:53



Solusi oleh Steve dan Peter bekerja dengan sangat baik.

Namun dalam beberapa kasus, Anda mungkin harus mengonversi nilai ke bilangan bulat. Anehnya, nilai yang dikembalikan dari $("...").offset().top kadang-kadang masuk float.
Menggunakan: parseInt($("....").offset().top)

Sebagai contoh:

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

15
2018-02-06 15:39



Versi ringkas dari solusi "hidup".

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

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

Penggunaan dasar: $('#your_element').scrollTo();


15
2017-08-29 11:19



Jika Anda hanya menangani gulir ke elemen masukan, Anda dapat menggunakan focus(). Misalnya, jika Anda ingin menggulir ke input yang terlihat pertama:

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

Atau masukan yang terlihat pertama dalam sebuah wadah dengan kelas .error:

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

Terimakasih untuk Tricia Ball untuk menunjukkan ini!


12
2018-01-28 17:00



Dengan solusi ini Anda tidak memerlukan plugin apa pun dan ada tidak diperlukan pengaturan selain menempatkan naskah sebelum penutupan Anda </body> menandai.

$("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);
}

Saat dimuat, jika ada hash di alamat, kami gulir ke sana.

Dan - setiap kali Anda mengklik a tautan dengan href hash misalnya #top, kami gulir ke sana.


11
2017-08-02 23:09



Dalam kebanyakan kasus, akan lebih baik menggunakan plugin. Serius saya akan tout milikku di sini. Tentu saja ada yang lain juga. Tapi tolong periksa apakah mereka benar-benar menghindari jebakan yang Anda ingin plugin di tempat pertama - tidak semua dari mereka lakukan.

Saya telah menulis tentang alasan menggunakan plugin di tempat lain. Singkatnya, satu liner yang mendukung sebagian besar jawaban di sini

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

UX buruk.

  • Animasi tidak menanggapi tindakan pengguna. Ini berjalan bahkan jika pengguna mengklik, mengetuk, atau mencoba menggulir.

  • Jika titik awal animasi dekat dengan elemen target, animasi sangat lambat.

  • Jika elemen target ditempatkan di dekat bagian bawah halaman, itu tidak dapat digulir ke bagian atas jendela. Animasi gulir berhenti tiba-tiba kemudian, dalam gerakan pertengahan.

Untuk menangani masalah ini (dan a sekelompok orang lain), Anda dapat menggunakan plugin milik saya, jQuery.scrollable. Panggilannya kemudian menjadi

$( window ).scrollTo( targetPosition );

dan hanya itu. Tentu saja ada lebih banyak pilihan.

Berkenaan dengan posisi target, $target.offset().top melakukan pekerjaan dalam banyak kasus. Namun perlu diketahui bahwa nilai yang dikembalikan tidak mengambil batas pada html elemen ke akun (lihat demo ini). Jika Anda ingin posisi target akurat dalam situasi apa pun, lebih baik digunakan

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

Itu berfungsi bahkan jika perbatasan di html elemen diatur.


7
2017-08-17 09:18