JavaScript, aby przewinąć długą stronę do DIV

Mam łącze na długiej stronie HTML. Po kliknięciu chcę, aby divinna część strony była widoczna w oknie, przewijając ją do widoku.

Trochę jak EnsureVisiblew innych językach.

Sprawdziłem scrollTopi scrollTowyglądają jak czerwone śledzie.

Czy ktoś może pomóc?

stare pytanie, ale jeśli ktoś znajdzie to przez google (tak jak ja) i kto nie chce używać kotwic lub jquery; istnieje wbudowana funkcja javascript do „skoku” do elementu;

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

a co jeszcze lepsze; zgodnie ze świetnymi tabelami kompatybilności w quirksmode, jest to obsługiwane przez wszystkie główne przeglądarki !

Jeśli nie chcesz dodawać dodatkowego rozszerzenia, poniższy kod powinien działać z jQuery.

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

A co z JQuery ScrollTo - zobacz ten przykładowy kod

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

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

Bez wyszukanego przewijania, ale powinno Cię tam zabrać.

Trudność z przewijaniem polega na tym, że może być konieczne nie tylko przewijanie strony, aby wyświetlić element div, ale może być również konieczne przewijanie wewnątrz przewijalnych elementów div na dowolnej liczbie poziomów.

Właściwość scrollTop jest dostępna w każdym elemencie DOM, w tym w treści dokumentu. Ustawiając to, możesz kontrolować, jak daleko w dół coś jest przewijane. Możesz również użyć właściwości clientHeight i scrollHeight, aby zobaczyć, ile przewijania jest potrzebne (przewijanie jest możliwe, gdy parametr clientHeight (widok) jest mniejszy niż scrollHeight (wysokość zawartości).

Możesz również użyć właściwości offsetTop, aby dowiedzieć się, gdzie w kontenerze znajduje się element.

Aby zbudować od podstaw procedurę przewijania w widoku prawdziwie ogólnego przeznaczenia, musisz zacząć od węzła, który chcesz ujawnić, upewnić się, że znajduje się on w widocznej części jego rodzica, a następnie powtórzyć to samo dla rodzica itd., Wszystko droga, aż dotrzesz na szczyt.

Jeden krok mógłby wyglądać mniej więcej tak (nieprzetestowany kod, bez sprawdzania przypadków brzegowych):

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

Możesz użyć Element.scrollIntoView()metody, jak wspomniano powyżej. Jeśli zostawisz go bez parametrów w środku, otrzymasz natychmiastowe brzydkie przewijanie . Aby temu zapobiec, możesz dodać ten parametr - behavior:"smooth".

Przykład:

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

Po prostu zastąp scroll-here-plzswoim divelementem lub na stronie internetowej. A jeśli widzisz swój element na dole okna lub pozycja nie jest taka, jakiej się spodziewałeś, pobaw się parametrem block: "". Można użyć block: "start", block: "end"lub block: "center".

Pamiętaj: zawsze używaj parametrów wewnątrz obiektu {}.

Jeśli nadal masz problemy, przejdź do https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Istnieje szczegółowa dokumentacja dotycząca tej metody.

To zadziałało dla mnie

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

Odpowiedź zamieszczona tutaj - to samo rozwiązanie Twojego problemu.

Edycja: odpowiedź JQuery jest bardzo przyjemna, jeśli chcesz płynnego przewijania - nie widziałem tego wcześniej w akcji.

Dlaczego nie nazwana kotwica?

Właściwość, której potrzebujesz, to location.hash. Na przykład:

location.hash = 'top'; // przeskoczy do nazwanej kotwicy "góra

Nie wiem, jak zrobić fajną animację przewijania bez użycia dojo lub jakiegoś podobnego zestawu narzędzi, ale jeśli potrzebujesz go tylko do przeskoczenia do kotwicy, location.hash powinien to zrobić.

(testowane na FF3 i Safari 3.1.2)

Nie mogę dodać komentarza do odpowiedzi futtta powyżej, ale dla płynniejszego przewijania użyj:

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

scrollTop (IIRC) to miejsce w dokumencie, do którego przewijana jest góra strony. scrollTo przewija stronę w taki sposób, że górna część strony znajduje się w miejscu określonym przez użytkownika.

To, czego potrzebujesz, to niektóre manipulowane style JavaScript. Powiedzmy, że jeśli chcesz, aby element DIV znajdował się poza ekranem i przewijaj go od prawej strony, ustaw lewy atrybut elementu div na szerokość strony, a następnie zmniejszaj go o określoną wartość co kilka sekund, aż znajdzie się tam, gdzie chcesz.

To powinno wskazać ci właściwy kierunek.

Dodatkowe: przepraszam, myślałem, że chciałeś, aby oddzielny element div „wyskoczył” skądś (tak jak czasami ta witryna), a nie przenosił całą stronę do sekcji. Właściwe użycie kotwic pozwoliłoby osiągnąć ten efekt.

Istnieje wtyczka jQuery dla ogólnego przypadku przewijania do elementu DOM, ale jeśli wydajność jest problemem (a kiedy nie?), Sugerowałbym zrobienie tego ręcznie. Obejmuje to dwa kroki:

1. Znajdowanie pozycji elementu, do którego przewijasz.
2. Przewijanie do tej pozycji.

quirksmode dobrze wyjaśnia mechanizm stojący za tym pierwszym. Oto moje preferowane rozwiązanie:

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

Używa rzutowania od zera do 0, co w niektórych kręgach nie jest odpowiednią etykietą, ale mi się podoba :) Druga część używa window.scroll. Więc reszta rozwiązania to:

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

Voila!

Osobiście uznałem powyższą odpowiedź Josha opartą na jQuery za najlepszą, jaką widziałem i działała idealnie dla mojej aplikacji ... oczywiście, już używałem jQuery ... Na pewno nie włączyłbym całej biblioteki jQ tylko do tego jeden cel.

Twoje zdrowie!

EDYCJA: OK ... więc zaledwie kilka sekund po opublikowaniu tego zobaczyłem inną odpowiedź tuż pod moją (nie jestem pewien, czy nadal pode mną po edycji), która mówi, że należy użyć:

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

Działa to doskonale i w znacznie mniejszym kodzie niż wersja jQuery! Nie miałem pojęcia, że ​​w JS jest wbudowana funkcja o nazwie .scrollIntoView (), ale tak jest! Więc jeśli chcesz fantazyjnej animacji, przejdź do jQuery. Szybko i brudno ... użyj tego!

Ten kod jest przydatny do płynnego przewijania

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

Popraw mnie, jeśli się mylę, ale ciągle czytam to pytanie i wciąż myślę, że Angus McCoteup pytał, jak ustawić element na pozycję: naprawiony.

Angus McCoteup, sprawdź http://www.cssplay.co.uk/layouts/fixed.html - jeśli chcesz, aby Twój DIV zachowywał się tam jak menu, zajrzyj do CSS