Jquery kullanarak sayfadaki belirli bir konuma nasıl gidebilirim?

JQuery kullanarak sayfada belirli bir konuma gitmek mümkün müdür?

Kaydırmak istediğim konum şunlara sahip olmak zorunda mı?

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

Veya belirli bir DOM kimliğine taşınabilir mi?

jQuery Scroll Eklentisi

Bu jquery ile etiketlenmiş bir soru olduğu için, bu kitaplığın sorunsuz kaydırma için çok güzel bir eklenti olduğunu söylemeliyim, burada bulabilirsiniz: http://plugins.jquery.com/scrollTo/

Dokümantasyondan Alıntılar:

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

veya

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

Kaydırma için özel jQuery işlevi

özel kaydırma jquery işlevinizi tanımlayarak çok hafif bir yaklaşım kullanabilirsiniz

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

ve şu şekilde kullanın:

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

Bir sayfanın koordinatlarına gidin

Animasyon htmlve bodybirlikte elemanları scrollTopveya scrollLeftnitelikleri

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

Düz javascript

ile kaydırma window.scroll

window.scroll(horizontalOffset, verticalOffset);

sadece özetlemek gerekirse, ID ile öğeye atlamak için window.location.hash kullanın

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

Doğrudan HTML'de (erişilebilirlik geliştirmeleri)

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

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

Evet, düz JavaScript'te bile oldukça kolaydır. Bir öğeye bir kimlik verirsiniz ve ardından bunu bir "yer imi" olarak kullanabilirsiniz:

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

Bir kullanıcı bir bağlantıyı tıkladığında oraya kaymasını istiyorsanız, denenmiş ve onaylanmış yöntemi kullanabilirsiniz:

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

Programlı olarak yapmak için şunu kullanın: scrollIntoView()

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

Herhangi bir eklenti kullanmanıza gerek yoktur, bunu şu şekilde yapabilirsiniz:

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

daha sonra belgeyi belirli DOM'a kaydırmak için bunu kullanın:

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

İşte saf bir javascript sürümü:

location.hash = '#123';

Otomatik olarak kayacaktır. "#" Ön ekini eklemeyi unutmayın.

Düz Javascript:

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>

Bu örnek, belirli bir div kimliğini, yani bu durumda 'idVal'i bulmayı gösterir. Ajax aracılığıyla bu sayfada açılacak olan sonraki bölümleriniz / tablolarınız varsa, benzersiz div'ler atayabilir ve her div içeriği için belirli bir konuma kaydırmak için komut dosyasını çağırabilirsiniz.

Umarım bu yararlı olur.

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

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

Bunu dene

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

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

İşte @ juraj-blahunka'nın hafif yaklaşımının bir çeşidi . Bu işlev, kabın belge olduğunu varsaymaz ve yalnızca öğe görünüm dışındaysa kaydırır. Gereksiz sekmeyi önlemek için animasyon kuyruğu da devre dışı bırakılır.

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

Jquery.easing.min.js'yi kullanma, Sabit IE konsolu Hataları ile

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

Kullanabilirsiniz scroll-behavior: smooth; Javascript olmadan yapmak için

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