Wie kann ich mit jquery zu einem bestimmten Ort auf der Seite scrollen?

Ist es möglich, mit jQuery zu einem bestimmten Ort auf der Seite zu scrollen?

Muss der Ort, an dem ich scrollen möchte, Folgendes haben:

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

Oder kann es einfach zu einer bestimmten DOM-ID verschoben werden?

jQuery Scroll Plugin

Da dies eine mit jquery getaggte Frage ist, muss ich sagen, dass diese Bibliothek ein sehr schönes Plugin für reibungsloses Scrollen hat. Sie finden sie hier: http://plugins.jquery.com/scrollTo/

Auszüge aus der Dokumentation:

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

oder

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

Benutzerdefinierte jQuery-Funktion zum Scrollen

Sie können einen sehr einfachen Ansatz verwenden, indem Sie Ihre benutzerdefinierte Scroll-Abfragefunktion definieren

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

und benutze es wie:

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

Scrollen Sie zu den Seitenkoordinaten

Animieren htmlund bodyElemente mit scrollTopoder scrollLeftAttributen

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

Einfaches Javascript

Scrollen mit window.scroll

window.scroll(horizontalOffset, verticalOffset);

Verwenden Sie nur die Datei window.location.hash, um zum Element mit der ID zu springen

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

Direkt in HTML (Zugänglichkeitsverbesserungen)

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

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

Ja, selbst in einfachem JavaScript ist es ziemlich einfach. Sie geben einem Element eine ID und können diese dann als "Lesezeichen" verwenden:

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

Wenn Sie möchten, dass es dort blättert, wenn ein Benutzer auf einen Link klickt, können Sie einfach die bewährte Methode verwenden:

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

Verwenden Sie dazu programmgesteuert scrollIntoView()

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

Es ist nicht erforderlich, ein Plugin zu verwenden. Sie können dies folgendermaßen tun:

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

Verwenden Sie diese Option, um das Dokument zu einem bestimmten DOM zu scrollen:

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

Hier ist eine reine Javascript-Version:

location.hash = '#123';

Es wird automatisch gescrollt. Denken Sie daran, das Präfix "#" hinzuzufügen.

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

Dieses Beispiel zeigt, wie Sie eine bestimmte Div-ID suchen, in diesem Fall 'idVal'. Wenn Sie nachfolgende Divs / Tabellen haben, die auf dieser Seite über Ajax geöffnet werden, können Sie eindeutige Divs zuweisen und das Skript aufrufen, um für jeden Inhalt von Divs zum jeweiligen Speicherort zu scrollen.

Hoffe das wird nützlich sein.

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

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

Versuche dies

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

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

Hier ist eine Variante des leichten Ansatzes von @ juraj-blahunka . Diese Funktion setzt nicht voraus, dass der Container das Dokument ist, und scrollt nur, wenn das Element nicht sichtbar ist. Die Warteschlange für Animationen ist ebenfalls deaktiviert, um unnötiges Abprallen zu vermeiden.

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

Verwenden von jquery.easing.min.js mit festen Fehlern in der IE-Konsole

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

Sie können scroll-behavior: smooth;dies ohne Javascript erledigen

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