Jak przewinąć do określonej lokalizacji na stronie za pomocą jQuery?

Czy za pomocą jQuery można przewijać do określonej lokalizacji na stronie?

Czy lokalizacja, którą chcę przewinąć, musi mieć:

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

Czy może po prostu przejść do określonego identyfikatora DOM?

Wtyczka jQuery Scroll

ponieważ jest to pytanie oznaczone jquery, muszę powiedzieć, że ta biblioteka ma bardzo fajną wtyczkę do płynnego przewijania, możesz ją znaleźć tutaj: http://plugins.jquery.com/scrollTo/

Fragmenty dokumentacji:

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

lub

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

Niestandardowa funkcja jQuery do przewijania

możesz użyć bardzo prostego podejścia , definiując swoją niestandardową funkcję przewijania jquery

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

i używaj go jak:

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

Przewiń do współrzędnych strony

Animuj htmli bodyelementy z atrybutami scrollToplubscrollLeft

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

Zwykły javascript

przewijanie za pomocą window.scroll

window.scroll(horizontalOffset, verticalOffset);

podsumowując, użyj window.location.hash, aby przejść do elementu o identyfikatorze

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

Bezpośrednio w HTML (ulepszenia dostępności)

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

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

Tak, nawet w zwykłym JavaScript jest to całkiem proste. Dajesz elementowi identyfikator, a następnie możesz go użyć jako „zakładki”:

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

Jeśli chcesz, aby przewijał się tam, gdy użytkownik kliknie łącze, możesz po prostu użyć wypróbowanej metody:

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

Aby zrobić to programowo, użyj scrollIntoView()

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

Nie ma potrzeby używania żadnej wtyczki, możesz to zrobić w ten sposób:

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

następnie użyj tego, aby przewinąć dokument do określonego DOM:

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

Oto czysta wersja javascript:

location.hash = '#123';

Przewinie się automatycznie. Pamiętaj, aby dodać przedrostek „#”.

Zwykły 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>

Ten przykład pokazuje, jak zlokalizować określony identyfikator div, tj. W tym przypadku „idVal”. Jeśli masz kolejne elementy div / tabele, które otworzą się na tej stronie za pośrednictwem ajax, możesz przypisać unikalne elementy div i wywołać skrypt, aby przewinął do określonej lokalizacji dla każdej zawartości elementów div.

Mam nadzieję, że to się przyda.

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

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

Spróbuj tego

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

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

Oto wariant lekkiego podejścia @ juraj-blahunka . Ta funkcja nie zakłada, że ​​kontener jest dokumentem i przewija się tylko wtedy, gdy element jest poza zasięgiem widoku. Kolejkowanie animacji jest również wyłączone, aby uniknąć niepotrzebnego przeskakiwania.

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

Korzystanie z jquery.easing.min.js, z poprawionymi błędami konsoli IE

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

Możesz użyć, scroll-behavior: smooth;aby zrobić to bez Javascript

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