Bagaimana saya bisa menggulir ke lokasi tertentu pada halaman menggunakan jquery?


133

Apakah mungkin untuk menggulir ke lokasi tertentu di halaman menggunakan jQuery?

Apakah lokasi yang ingin saya gulir harus memiliki:

<a name="#123">here</a>

Atau bisakah itu pindah ke id DOM tertentu?


3
hanya sebuah catatan kecil: atribut "nama" tidak diperbolehkan dalam XHTML 1.1 Ketat, gunakan ID sebagai gantinya
Juraj Blahunka

pertanyaan menarik, tidak dapat menggunakan koordinat halaman untuk menggulir? Saya pikir kita harus bisa.
Omar Abid

Saya mendapat solusi yang mirip dengan kebutuhan Anda di [sini] [1] [1]: stackoverflow.com/questions/3432656/…
user1493023

@ mrblah apakah masalah Anda teratasi?
Meghdad Hadidi

Jawaban:


242

Plugin jQuery Scroll

karena ini adalah pertanyaan yang ditandai dengan jquery saya harus mengatakan, bahwa perpustakaan ini memiliki plugin yang sangat bagus untuk pengguliran yang lancar, Anda dapat menemukannya di sini: http://plugins.jquery.com/scrollTo/

Kutipan dari Dokumentasi:

$('div.pane').scrollTo(...);//all divs w/class pane

atau

$.scrollTo(...);//the plugin will take care of this

Fungsi jQuery kustom untuk menggulir

Anda dapat menggunakan pendekatan yang sangat ringan dengan mendefinisikan fungsi jquery gulir khusus Anda

$.fn.scrollView = function () {
    return this.each(function () {
        $('html, body').animate({
            scrollTop: $(this).offset().top
        }, 1000);
    });
}

dan gunakan seperti:

$('#your-div').scrollView();

Gulir ke koordinat halaman

Menghidupkan htmldan bodyelemen dengan scrollTopatau scrollLeftatribut

$('html, body').animate({
    scrollTop: 0,
    scrollLeft: 300
}, 1000);

Javascript biasa

bergulir dengan window.scroll

window.scroll(horizontalOffset, verticalOffset);

hanya untuk meringkas, gunakan window.location.hash untuk melompat ke elemen dengan ID

window.location.hash = '#your-page-element';

Langsung dalam HTML (peningkatan aksesibilitas)

<a href="#your-page-element">Jump to ID</a>

<div id="your-page-element">
    will jump here
</div>

Terima kasih @Juraj Blahunka, tapi saya melakukan ini tanpa plugin apa pun
Meghdad Hadidi

Tautan tidak membawa saya ke ScrollTo . Bisakah Anda memperbaruinya?
Barna Tekse

Ini seharusnya jawabannya!
neelmeg

128

Ya, bahkan dalam JavaScript biasa saja cukup mudah. Anda memberi elemen id dan kemudian Anda dapat menggunakannya sebagai "bookmark":

<div id="here">here</div>

Jika Anda ingin menggulir di sana ketika pengguna mengklik sebuah tautan, Anda bisa menggunakan metode yang sudah terbukti benar:

<a href="#here">scroll to over there</a>

Untuk melakukannya secara terprogram, gunakan scrollIntoView()

document.getElementById("here").scrollIntoView()

@nickf Ini belum didukung di mana-mana. caniuse.com/#search=scrollIntoView
Aditya Singh

Ini saya dukung ( developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView ). Pikir Anda tidak membaca caniuse dengan benar. Namun, tidak akan dianimasikan. Melainkan lompatan yang cukup tiba-tiba yang tidak selalu bagus.
perry

53

Tidak perlu menggunakan plugin apa pun, Anda dapat melakukannya seperti ini:

var divPosition = $('#divId').offset();

kemudian gunakan ini untuk menggulir dokumen ke DOM tertentu:

$('html, body').animate({scrollTop: divPosition.top}, "slow");

3
+1 Ini mungkin jawaban terbaik. Tidak banyak kode dan tidak memerlukan plugin.
Tricky12

1
Perhatikan bahwa Anda mungkin perlu menghitung ulang ukuran offset pada jendela.
Bart Burg

2
@BartBurg poin bagus - atau hanya menghitung ulang tepat sebelum .animatepanggilan terjadi
mikermcneil

5
Suka jawaban yang sederhana. Mengapa orang harus membuat hal-hal begitu rumit? Tidak ingin plugin lain.
sterfry68

1
Memang jawaban terbaik.
Robert Ross

21

Ini versi javascript murni:

location.hash = '#123';

Ini akan bergulir secara otomatis. Ingatlah untuk menambahkan awalan "#".


1
Menggunakan cara primitif bernama jangkar, Anda dapat memiliki URL yang menyertakan hash. Misalnya mywebsite.com/page-about/#123 Bookmarking juga menyertakan perilaku hash + scrollintoview.
okw

1
Akan lebih bagus jika Anda bisa menjelaskan sedikit
JGallardo


5
<div id="idVal">
    <!--div content goes here-->
</div>
...
<script type="text/javascript">
     $(document).ready(function(){
         var divLoc = $('#idVal').offset();
         $('html, body').animate({scrollTop: divLoc.top}, "slow");
     });
</script>

Contoh ini menunjukkan untuk mencari ke id id tertentu yaitu, 'idVal' dalam kasus ini. Jika Anda memiliki div / tabel berikutnya yang akan terbuka di halaman ini melalui ajax, maka Anda dapat menetapkan divs unik dan memanggil skrip untuk menggulir ke lokasi tertentu untuk setiap konten div.

Semoga ini bermanfaat.


4
<script type="text/javascript">
    $(document).ready(function(){
        $(".scroll-element").click(function(){
            $('html,body').animate({
                scrollTop: $('.our_companies').offset().top
            }, 1000);

            return false;
        });
    })
</script>


Akan lebih bagus jika Anda menambahkan beberapa komentar ke kode Anda. Bagaimana cara membantu penanya untuk menyelesaikan pertanyaan mereka?
Artemix

1

Coba ini

<div id="divRegister"></div>

$(document).ready(function() {
location.hash = "divRegister";
});

0

Berikut adalah varian dari pendekatan ringan @ juraj-blahunka . Fungsi ini tidak menganggap wadah adalah dokumen dan hanya menggulir jika item tidak terlihat. Antrian animasi juga dinonaktifkan untuk menghindari pantulan yang tidak perlu.

$.fn.scrollToView = function () {
    return $.each(this, function () {
        if ($(this).position().top < 0 ||
            $(this).position().top + $(this).height() > $(this).parent().height()) {
            $(this).parent().animate({
                scrollTop: $(this).parent().scrollTop() + $(this).position().top
            }, {
                duration: 300,
                queue: false
            });
        }
    });
};

Saya memiliki masalah pentalan, tetapi metode Anda tidak berfungsi
Anon

0

Menggunakan jquery.easing.min.js, Dengan Kesalahan konsol IE yang diperbaiki

Html

<a class="page-scroll" href="#features">Features</a>
<section id="features" class="features-section">Features Section</section>


        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="js/jquery.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>

        <!-- Scrolling Nav JavaScript -->
        <script src="js/jquery.easing.min.js"></script>

Jquery

//jQuery to collapse the navbar on scroll, you can use this code with in external file with name scrolling-nav.js
        $(window).scroll(function () {
            if ($(".navbar").offset().top > 50) {
                $(".navbar-fixed-top").addClass("top-nav-collapse");
            } else {
                $(".navbar-fixed-top").removeClass("top-nav-collapse");
            }
        });
        //jQuery for page scrolling feature - requires jQuery Easing plugin
        $(function () {
            $('a.page-scroll').bind('click', function (event) {
                var anchor = $(this);
                if ($(anchor).length > 0) {
                    var href = $(anchor).attr('href');
                    if ($(href.substring(href.indexOf('#'))).length > 0) {
                        $('html, body').stop().animate({
                            scrollTop: $(href.substring(href.indexOf('#'))).offset().top
                        }, 1500, 'easeInOutExpo');
                    }
                    else {
                        window.location = href;
                    }
                }
                event.preventDefault();
            });
        });

Itu terlalu banyak kode untuk tugas yang begitu sederhana. location.hash = 'idOfElement';harus mencukupi
Kolob Canyon

0

Anda dapat menggunakan scroll-behavior: smooth;untuk menyelesaikan ini tanpa Javascript

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior


scroll-behaviour: halus; bukan properti yang kompatibel dengan browser.
Super Model

periksa kompatibilitas peramban lebih rendah di tautan - developer.mozilla.org/en-US/docs/Web/CSS/…
Sairam

Ya tabel yang diberikan di tautan Anda menunjukkan: Edge, IE dan safari tidak kompatibel dengan properti ini.
Super Model
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.