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

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?

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>

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

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");

Ini versi javascript murni:

location.hash = '#123';

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

Javascript Biasa:

window.location = "#elementId"

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

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

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

Coba ini

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

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

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
            });
        }
    });
};

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

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

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