JavaScript zum Scrollen einer langen Seite zu DIV

Ich habe einen Link auf einer langen HTML-Seite. Wenn ich darauf klicke, möchte ich, dass ein divanderer Teil der Seite im Fenster sichtbar ist, indem ich in die Ansicht scrolle.

Ein bisschen wie EnsureVisiblein anderen Sprachen.

Ich habe ausgecheckt scrollTopund scrollTosie scheinen wie rote Heringe.

Kann jemand helfen?

alte Frage, aber wenn jemand dies über Google findet (wie ich) und wer keine Anker oder JQuery verwenden möchte; Es gibt eine eingebaute Javascript-Funktion, um zu einem Element zu springen.

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

und was ist noch besser; Laut den großen Kompatibilitätstabellen im Quirksmode wird dies von allen gängigen Browsern unterstützt !

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

Wie wäre es mit dem JQuery ScrollTo - siehe diesen Beispielcode

<a href="#myAnchorALongWayDownThePage">Click here to scroll</a>

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

Kein ausgefallenes Scrollen, aber es sollte Sie dorthin bringen.

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 Dokumententexts. Durch Einstellen können Sie steuern, wie weit unten etwas gescrollt wird. Sie können auch die Eigenschaften clientHeight und scrollHeight verwenden, um zu sehen, wie viel Bildlauf erforderlich ist (Bildlauf ist möglich, wenn clientHeight (Ansichtsfenster) kleiner als scrollHeight (die Höhe des Inhalts) ist.

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

Um eine wirklich universelle Routine zum Scrollen in die Ansicht von Grund auf neu zu erstellen, müssen Sie an dem Knoten beginnen, den Sie verfügbar machen möchten, sicherstellen, dass er sich im sichtbaren Teil des übergeordneten Knotens befindet, und ihn dann für den übergeordneten Knoten usw. wiederholen den Weg bis zum Gipfel.

Ein Schritt davon würde ungefähr so ​​aussehen (ungetesteter Code, keine Überprüfung von Randfä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);
  }
}

Sie können die Element.scrollIntoView()oben erwähnte Methode verwenden. Wenn Sie es ohne Parameter belassen, erhalten Sie sofort eine 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 scroll-here-plzSie einfach durch Ihr divoder Element auf einer Website. Und wenn Sie Ihr Element am unteren Rand Ihres Fensters sehen oder die Position nicht Ihren Erwartungen entspricht, spielen Sie mit den Parametern block: "". Sie können verwenden block: "start", block: "end"oder block: "center".

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

Wenn Sie immer noch Probleme haben, gehen Sie zu https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView auf

Zu dieser Methode gibt es eine detaillierte Dokumentation.

Das hat bei mir funktioniert

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

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

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

Warum nicht ein benannter Anker?

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

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

Ich weiß nicht, wie ich die nette Scroll-Animation ohne Dojo oder ein solches Toolkit machen soll, aber wenn Sie es nur brauchen, um zu einem Anker zu springen, sollte location.hash es tun.

(getestet auf FF3 und Safari 3.1.2)

Ich kann der obigen Antwort von futtta keinen Kommentar hinzufügen, aber für eine flüssigere Schriftrolle verwenden Sie:

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

Bei scrollTop (IIRC) wird im Dokument der obere Rand der Seite gescrollt. scrollTo scrollt die Seite so, dass Sie oben auf der Seite angeben.

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

Dies sollte Sie in die richtige Richtung weisen.

Zusätzlich: Es tut mir leid, ich dachte, Sie möchten, dass ein separates Div von irgendwoher "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.

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

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

quirksmode gibt eine gute Erklärung für den Mechanismus hinter dem ersteren. Hier ist meine bevorzugte Lösung:

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

Es verwendet Casting von null bis 0, was in einigen Kreisen keine 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!

Ich persönlich fand Joshs jQuery-basierte Antwort oben die beste, die ich gesehen habe, und funktionierte perfekt für meine Anwendung ... natürlich habe ich bereits jQuery verwendet ... ich hätte sicherlich nicht die gesamte jQuer-Bibliothek nur dafür aufgenommen ein Zweck.

Prost!

EDIT: OK ... also nur wenige Sekunden nachdem ich dies gepostet habe, sah ich eine andere Antwort direkt unter meiner (nicht sicher, ob sie nach einer Bearbeitung noch unter mir ist), die lautete:

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 eingebaute Funktion namens .scrollIntoView () gibt, aber da ist sie! Wenn Sie also eine ausgefallene Animation wünschen, gehen Sie zu jQuery. Schnell und dreckig ... benutze diesen!

Für einen reibungslosen Bildlauf ist dieser Code hilfreich

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

Korrigieren Sie mich, wenn ich falsch liege, aber ich lese die Frage immer wieder und denke immer noch, dass Angus McCoteup gefragt hat, wie ein Element als Position festgelegt werden soll: behoben.

Angus McCoteup, besuchen Sie http://www.cssplay.co.uk/layouts/fixed.html - wenn Sie möchten, dass sich Ihr DIV dort wie ein Menü verhält, schauen Sie sich dort ein CSS an