JavaScript untuk menggulir halaman panjang ke DIV

Saya memiliki link di halaman HTML yang panjang. Saat saya mengkliknya, saya ingin divbagian lain dari halaman tersebut terlihat di jendela dengan menggulir ke tampilan.

Sedikit seperti EnsureVisibledalam bahasa lain.

Saya sudah memeriksanya scrollTopdan scrollTotetapi tampaknya seperti ikan haring merah.

Adakah yang bisa membantu?

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

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

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

Jika Anda tidak ingin menambahkan ekstensi tambahan, kode berikut harus berfungsi 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;
        }
    });

Bagaimana dengan JQuery ScrollTo - lihat kode contoh ini

<a href="#myAnchorALongWayDownThePage">Click here to scroll</a>

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

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

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

Properti scrollTop tersedia di elemen DOM apa pun, termasuk badan dokumen. Dengan mengaturnya, Anda dapat mengontrol seberapa jauh sesuatu digulir ke bawah. Anda juga dapat menggunakan properti clientHeight dan scrollHeight untuk melihat seberapa banyak pengguliran yang dibutuhkan (pengguliran dimungkinkan ketika clientHeight (viewport) kurang dari scrollHeight (ketinggian konten).

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

Untuk membuat rutinitas "gulir ke tampilan" yang benar-benar bertujuan umum dari awal, Anda harus mulai dari node yang ingin Anda tampilkan, pastikan node tersebut berada di bagian yang terlihat dari induknya, lalu ulangi hal yang sama untuk induknya, dll. jalan sampai Anda mencapai puncak.

Salah satu langkahnya akan terlihat seperti ini (kode belum diuji, bukan 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);
  }
}

Anda dapat menggunakan Element.scrollIntoView()metode seperti yang disebutkan di atas. Jika Anda membiarkannya tanpa parameter di dalamnya, Anda akan memiliki scroll 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-plzdengan Anda divatau elemen di situs web. Dan jika Anda melihat elemen Anda di bagian bawah jendela Anda atau posisinya tidak seperti yang Anda harapkan, mainkan parameter block: "". Anda dapat menggunakan block: "start", block: "end"atau block: "center".

Ingat: Selalu gunakan parameter di dalam objek {}.

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

Ada dokumentasi rinci untuk metode ini.

Ini berhasil untuk saya

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

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

Sunting: jawaban JQuery sangat bagus jika Anda menginginkan gulungan yang mulus - Saya belum pernah melihatnya beraksi sebelumnya.

Mengapa bukan jangkar bernama?

Properti yang Anda butuhkan adalah lokasi.hash. Misalnya:

location.hash = 'top'; // akan melompat ke atas bernama jangkar "

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

(diuji pada FF3 dan Safari 3.1.2)

Saya tidak dapat menambahkan komentar ke balasan futtta di atas, tetapi untuk penggunaan gulir yang lebih lancar:

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

scrollTop (IIRC) adalah tempat di dokumen bagian atas halaman digulir. scroll Untuk menggulir halaman sehingga bagian atas halaman berada di tempat yang Anda tentukan.

Yang Anda butuhkan di sini adalah beberapa gaya manipulasi Javascript. Katakanlah jika Anda ingin div off-screen dan scroll ke dalam dari kanan, Anda akan menyetel atribut left dari div ke lebar halaman dan kemudian menguranginya dengan jumlah tertentu setiap beberapa detik sampai ke tempat yang Anda inginkan.

Ini akan mengarahkan Anda ke arah yang benar.

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

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

1. Menemukan posisi elemen yang Anda scroll.
2. Menggulir ke posisi itu.

quirksmode memberikan penjelasan yang baik tentang mekanisme di balik yang pertama. Inilah solusi pilihan saya:

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

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

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

Voila!

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 menyertakan seluruh pustaka jQ hanya untuk itu satu tujuan.

Bersulang!

EDIT: Oke ... jadi hanya beberapa detik setelah memposting ini, saya melihat jawaban lain tepat di bawah saya (tidak yakin apakah masih di bawah saya setelah mengedit) yang mengatakan menggunakan:

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

Ini bekerja 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 menginginkan animasi yang mewah, gunakan jQuery. Cepat dan kotor ... gunakan yang ini!

Untuk gulir halus 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;
      }
    }
  });

Koreksi saya jika saya salah tetapi saya membaca pertanyaan itu berulang kali dan masih berpikir bahwa Angus McCoteup bertanya bagaimana cara mengatur elemen menjadi posisi: diperbaiki.

Angus McCoteup, lihat http://www.cssplay.co.uk/layouts/fixed.html - jika Anda ingin DIV Anda berperilaku seperti menu di sana, lihat CSS di sana