it-swarm-id.com

JavaScript untuk menggulir halaman panjang ke DIV

Saya memiliki tautan di halaman HTML yang panjang. Ketika saya mengkliknya, saya ingin div pada bagian lain halaman terlihat di jendela dengan menggulir ke tampilan.

Sedikit seperti EnsureVisible dalam bahasa lain.

Saya telah memeriksa scrollTop dan scrollTo tetapi tampaknya seperti ikan haring merah.

Adakah yang bisa membantu?

97
Angus McCoteup

pertanyaan lama, tetapi jika ada yang menemukan ini melalui google (seperti yang saya lakukan) dan siapa yang tidak ingin menggunakan jangkar atau jquery; ada fungsi javascript bawaan untuk 'melompat' ke suatu elemen;

document.getElementById('youridhere').scrollIntoView();

dan apa yang lebih baik; menurut tabel kompatibilitas yang bagus pada quirksmode, ini didukung oleh semua browser utama !

369
futtta

Jika Anda tidak ingin menambahkan ekstensi tambahan, kode berikut harus bekerja dengan jQuery.

$('a[href=#target]').
    click(function(){
        var target = $('a[name=target]');
        if (target.length)
        {
            var top = target.offset().top;
            $('html,body').animate({scrollTop: top}, 1000);
            return false;
        }
    });
23
Josh
22
George Mauer
<a href="#myAnchorALongWayDownThePage">Click here to scroll</a>

<A name='myAnchorALongWayDownThePage"></a>

Tidak ada scroll yang mewah tetapi harus membawa Anda ke sana.

15
mjallday

Kesulitan dengan menggulir adalah bahwa Anda mungkin tidak hanya perlu menggulir halaman untuk menampilkan div, tetapi Anda mungkin perlu menggulir di dalam div yang dapat digulir pada sejumlah level juga.

Properti scrollTop tersedia pada setiap elemen DOM, termasuk badan dokumen. Dengan mengaturnya, Anda dapat mengontrol seberapa jauh sesuatu digulir. Anda juga dapat menggunakan properti clientHeight dan scrollHeight untuk melihat berapa banyak pengguliran diperlukan (pengguliran dimungkinkan ketika clientHeight (viewport) kurang dari scrollHeight (ketinggian konten).

Anda juga bisa menggunakan properti offsetTop untuk mencari tahu di mana dalam sebuah wadah sebuah elemen berada.

Untuk membangun rutinitas "gulir ke tampilan" yang benar-benar umum dari awal, Anda harus mulai dari simpul yang ingin Anda tampilkan, pastikan itu berada di bagian yang terlihat dari induknya, lalu ulangi yang sama untuk induknya, dll, semua jalan sampai Anda mencapai puncak.

Satu langkah dari ini akan terlihat seperti ini (kode yang belum diuji, tidak memeriksa kasus Edge):

function scrollIntoView(node) {
  var parent = node.parent;
  var parentCHeight = parent.clientHeight;
  var parentSHeight = parent.scrollHeight;
  if (parentSHeight > parentCHeight) {
    var nodeHeight = node.clientHeight;
    var nodeOffset = node.offsetTop;
    var scrollOffset = nodeOffset + (nodeHeight / 2) - (parentCHeight / 2);
    parent.scrollTop = scrollOffset;
  }
  if (parent.parent) {
    scrollIntoView(parent);
  }
}
8
levik

Ini berhasil untuk saya

document.getElementById('divElem').scrollIntoView();
7
Xcoder

Anda dapat menggunakan metode Element.scrollIntoView() seperti yang disebutkan di atas. Jika Anda membiarkannya tanpa parameter di dalamnya, Anda akan memiliki gulir jelek instan . Untuk mencegahnya Anda dapat menambahkan parameter ini - behavior:"smooth".

Contoh:

document.getElementById('scroll-here-plz').scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});

Cukup ganti scroll-here-plz dengan div atau elemen Anda di situs web. Dan jika Anda melihat elemen Anda di bagian bawah jendela Anda atau posisinya tidak seperti yang Anda harapkan, mainkan dengan parameter block: "". Anda dapat menggunakan block: "start", block: "end" atau block: "center".

Ingat: Selalu gunakan parameter di dalam suatu objek {}.

Jika Anda masih memiliki masalah, buka https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Ada dokumentasi terperinci untuk metode ini.

6
Smelino

Jawaban diposting di sini - solusi yang sama untuk masalah Anda.

Sunting: jawaban JQuery sangat bagus jika Anda ingin gulir yang lancar - Saya belum pernah melihat itu dalam tindakan sebelumnya.

5
Chuck

Mengapa bukan jangkar bernama?

4
Bloodhound

Properti yang Anda butuhkan adalah location.hash. Sebagai contoh:

location.hash = 'top'; // akan melompat ke beri nama anchor "top

Saya tidak tahu bagaimana cara membuat animasi gulir yang bagus tanpa menggunakan dojo atau beberapa toolkit seperti itu, tetapi jika Anda hanya perlu melompat ke jangkar, location.hash harus melakukannya.

(diuji pada FF3 dan Safari 3.1.2)

4
Scott Swezey

Saya tidak dapat menambahkan komentar pada balasan futtta di atas, tetapi untuk penggunaan scroll yang lebih halus:

onClick="document.getElementById('more').scrollIntoView({block: 'start', behavior: 'smooth'});"
3
funnyfish

Untuk gulir yang lancar, kode ini berguna

$('a[href*=#scrollToDivId]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      var head_height = $('.header').outerHeight(); // if page has any sticky header get the header height else use 0 here
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - head_height
        }, 1000);
        return false;
      }
    }
  });
0
Swarnendu Paul

Saya pribadi menemukan jawaban berbasis jQuery Josh di atas menjadi yang terbaik yang saya lihat, dan bekerja dengan sempurna untuk aplikasi saya ... tentu saja, saya sudah menggunakan jQuery ... Saya pasti tidak akan memasukkan seluruh perpustakaan jQ hanya untuk satu tujuan itu.

Tepuk tangan!

EDIT: OKE ... jadi hanya beberapa detik setelah memposting ini, saya melihat jawaban lain hanya di bawah milik saya (tidak yakin apakah masih di bawah saya setelah diedit) yang mengatakan untuk menggunakan:

document.getElementById ('your_element_ID_here'). scrollIntoView ();

Ini berfungsi dengan sempurna dan dalam kode yang jauh lebih sedikit daripada versi jQuery! Saya tidak tahu bahwa ada fungsi built-in di JS yang disebut .scrollIntoView (), tapi itu dia! Jadi, jika Anda ingin animasi yang mewah, buka jQuery. Cepat dan kotor ... gunakan yang ini!

0
Lelando

Ada plugin jQuery untuk kasus umum bergulir ke elemen DOM, tetapi jika kinerja merupakan masalah (dan kapan tidak?), Saya sarankan melakukannya secara manual. Ini melibatkan dua langkah:

  1. Menemukan posisi elemen yang Anda gulir.
  2. Bergulir ke posisi itu.

quirksmode memberikan penjelasan yang baik tentang mekanisme di belakang yang pertama. Inilah solusi yang saya sukai:

function absoluteOffset(elem) {
    return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}

Ini menggunakan casting dari nol ke 0, yang tidak tepat Etiket dalam beberapa lingkaran, tapi saya suka :) Bagian kedua menggunakan window.scroll. Jadi solusinya adalah:

function scrollToElement(elem) {
    window.scroll(absoluteOffset(elem));
}

Voila!

0
Andrey Fedorov

scrollTop (IIRC) adalah tempat di dalam dokumen bagian atas halaman digulir ke. gulirUntuk menggulir halaman sehingga bagian atas halaman adalah tempat yang Anda tentukan.

Yang Anda butuhkan di sini adalah beberapa gaya Javascript yang dimanipulasi. Katakan jika Anda ingin div keluar-layar dan gulir dari kanan Anda akan mengatur atribut kiri div ke lebar halaman dan kemudian menguranginya dengan jumlah yang ditetapkan setiap beberapa detik sampai di tempat yang Anda inginkan.

Ini akan mengarahkan Anda ke arah yang benar.

Tambahan: Maaf, saya pikir Anda ingin div terpisah untuk 'pop out' dari suatu tempat (kadang-kadang seperti situs ini), dan tidak memindahkan seluruh halaman ke bagian. Penggunaan jangkar yang tepat akan mencapai efek itu.

0
Benjamin Autin