it-swarm-eu.dev

JavaScript, um eine lange Seite zu DIV zu scrollen

Ich habe einen Link auf einer langen HTML-Seite. Wenn ich darauf klicke, möchte ich, dass ein div auf einem anderen Teil der Seite im Fenster angezeigt wird, indem ich in die Ansicht scrolle.

Ein bisschen wie EnsureVisible in anderen Sprachen.

Ich habe scrollTop und scrollTo ausgecheckt, aber sie scheinen wie rote Heringe.

Kann jemand helfen?

97
Angus McCoteup

alte frage, aber wenn jemand dies über google findet (wie ich) und wer keine anker oder jquery benutzen will; Es gibt eine eingebaute Javascript-Funktion, um zu einem Element zu springen.

document.getElementById('youridhere').scrollIntoView();

und was ist noch besser; Laut den großartigen Kompatibilitätstabellen von quirksmode ist dies von allen gängigen Browsern unterstützt !

369
futtta

Wenn Sie keine zusätzliche Erweiterung hinzufügen möchten, sollte der folgende Code mit jQuery funktionieren.

$('a[href=#target]').
    click(function(){
        var target = $('a[name=target]');
        if (target.length)
        {
            var top = target.offset().top;
            $('html,body').animate({scrollTop: top}, 1000);
            return false;
        }
    });
23
Josh
22
George Mauer
<a href="#myAnchorALongWayDownThePage">Click here to scroll</a>

<A name='myAnchorALongWayDownThePage"></a>

Kein ausgefallenes Scrollen, aber es sollte dich dahin bringen.

15
mjallday

Die Schwierigkeit beim Scrollen besteht darin, dass Sie möglicherweise nicht nur die Seite scrollen müssen, um ein Div anzuzeigen, sondern möglicherweise auch in scrollbaren Divs auf einer beliebigen Anzahl von Ebenen scrollen müssen.

Die scrollTop-Eigenschaft ist für jedes DOM-Element verfügbar, einschließlich des Dokumentkörpers. Indem Sie es einstellen, können Sie steuern, wie weit etwas gescrollt wird. Sie können auch die Eigenschaften clientHeight und scrollHeight verwenden, um festzustellen, wie viel Bildlauf erforderlich ist (Bildlauf ist möglich, wenn clientHeight (Ansichtsfenster) kleiner als scrollHeight (Höhe des Inhalts) ist.

Sie können auch die Eigenschaft offsetTop verwenden, um herauszufinden, wo sich ein Element im Container befindet.

Um eine wirklich allgemeine Routine zum Scrollen in die Ansicht von Grund auf neu zu erstellen, müssten Sie an dem Knoten beginnen, den Sie verfügbar machen möchten, sicherstellen, dass er im sichtbaren Teil des übergeordneten Elements liegt, und dann dasselbe für das übergeordnete Element usw. wiederholen den Weg bis zum Gipfel.

Ein Schritt davon würde ungefähr so ​​aussehen (ungetesteter Code, keine Prüfung von Edge-Fällen):

function scrollIntoView(node) {
  var parent = node.parent;
  var parentCHeight = parent.clientHeight;
  var parentSHeight = parent.scrollHeight;
  if (parentSHeight > parentCHeight) {
    var nodeHeight = node.clientHeight;
    var nodeOffset = node.offsetTop;
    var scrollOffset = nodeOffset + (nodeHeight / 2) - (parentCHeight / 2);
    parent.scrollTop = scrollOffset;
  }
  if (parent.parent) {
    scrollIntoView(parent);
  }
}
8
levik

Das hat bei mir funktioniert

document.getElementById('divElem').scrollIntoView();
7
Xcoder

Sie können die Methode Element.scrollIntoView() wie oben erwähnt verwenden. Wenn Sie es ohne Parameter belassen, erhalten Sie eine sofortige hässliche Schriftrolle. Um dies zu verhindern, können Sie diesen Parameter hinzufügen - behavior:"smooth".

Beispiel:

document.getElementById('scroll-here-plz').scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});

Ersetzen Sie einfach scroll-here-plz mit Ihrem div oder Element auf einer Website. Und wenn Sie Ihr Element am unteren Rand Ihres Fensters sehen oder die Position nicht der erwarteten entspricht, spielen Sie mit dem Parameter block: "". Sie können block: "start", block: "end" oder block: "center".

Denken Sie daran: Verwenden Sie immer Parameter innerhalb eines Objekts {}.

Wenn Sie weiterhin Probleme haben, rufen Sie https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView auf

Zu dieser Methode gibt es eine ausführliche Dokumentation.

6
Smelino

Antwort gepostet hier - gleiche Lösung für Ihr Problem.

Bearbeiten: Die JQuery-Antwort ist sehr schön, wenn Sie einen reibungslosen Bildlauf wünschen - ich hatte das noch nie in Aktion gesehen.

5
Chuck

Warum nicht ein benannter Anker?

4
Bloodhound

Die Eigenschaft, die Sie benötigen, ist location.hash. Beispielsweise:

location.hash = 'top'; // würde zum benannten Anker springen "top

Ich weiß nicht, wie man die Nice-Scroll-Animation ohne Dojo oder ein ähnliches Toolkit erstellt, aber wenn Sie nur zu einem Anker springen müssen, sollte location.hash dies tun.

(getestet auf FF3 und Safari 3.1.2)

4
Scott Swezey

Ich kann der obigen Antwort von futtta keinen Kommentar hinzufügen, aber für eine glattere Darstellung verwende:

onClick="document.getElementById('more').scrollIntoView({block: 'start', behavior: 'smooth'});"
3
funnyfish

Für einen reibungslosen Bildlauf ist dieser Code nützlich

$('a[href*=#scrollToDivId]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      var head_height = $('.header').outerHeight(); // if page has any sticky header get the header height else use 0 here
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - head_height
        }, 1000);
        return false;
      }
    }
  });
0
Swarnendu Paul

Ich persönlich fand, dass Joshs jQuery-basierte Antwort die beste war, die ich gesehen habe, und arbeitete perfekt für meine Anwendung ... natürlich habe ich bereits verwendet jQuery ... Ich hätte sicherlich nicht die gesamte jQ-Bibliothek nur für diesen einen Zweck aufgenommen.

Prost!

EDIT: OK ... nur Sekunden nachdem ich das gepostet habe, sah ich eine andere Antwort genau unter meiner (nicht sicher, ob ich nach einer Bearbeitung noch unter mir bin) sagte zu verwenden:

document.getElementById ('your_element_ID_here'). scrollIntoView ();

Dies funktioniert perfekt und in so viel weniger Code als die jQuery-Version! Ich hatte keine Ahnung, dass es in JS eine integrierte Funktion namens .scrollIntoView () gibt, aber da ist sie! Also, wenn Sie die ausgefallene Animation wollen, gehen Sie zu jQuery. Schnell und schmutzig ... benutze dieses!

0
Lelando

Es gibt ein jQuery-Plugin für den allgemeinen Fall des Bildlaufs zu einem DOM-Element, aber wenn die Leistung ein Problem darstellt (und wann nicht?), Würde ich vorschlagen, dies manuell zu tun. Dies umfasst zwei Schritte:

  1. Suchen der Position des Elements, zu dem Sie scrollen.
  2. Scrollen zu dieser Position.

Quirksmode gibt eine gute Erklärung des Mechanismus hinter dem ersteren. Hier ist meine bevorzugte Lösung:

function absoluteOffset(elem) {
    return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}

Es wird ein Casting von null bis 0 verwendet, was in manchen Kreisen nicht die richtige Etikette ist, aber ich mag es :) Der zweite Teil verwendet window.scroll. Der Rest der Lösung lautet also:

function scrollToElement(elem) {
    window.scroll(absoluteOffset(elem));
}

Voila!

0
Andrey Fedorov

scrollTop (IIRC) ist die Position, zu der im Dokument der obere Rand der Seite verschoben wird. scrollTo scrollt die Seite so, dass Sie den oberen Rand der Seite angeben.

Was Sie hier brauchen, sind einige von Javascript manipulierte Stile. Angenommen, Sie möchten das Div außerhalb des Bildschirms und scrollen von rechts nach innen. Dann setzen Sie das Attribut left des Div auf die Breite der Seite und verringern es alle paar Sekunden um einen festgelegten Wert, bis Sie den gewünschten Wert erreicht haben.

Dies sollte Sie in die richtige Richtung weisen.

Zusätzlich: Es tut mir leid, ich dachte, Sie wollten, dass ein separater Div von irgendwo "herausspringt" (so wie es diese Site manchmal tut) und nicht die gesamte Seite in einen Abschnitt verschiebt. Die richtige Verwendung von Ankern würde diesen Effekt erzielen.

0
Benjamin Autin