it-swarm.it

JavaScript per scorrere la pagina lunga fino a DIV

Ho un link su una lunga pagina HTML. Quando faccio clic, desidero un div su un'altra parte della pagina per essere visibile nella finestra scorrendo nella vista.

Un po 'come EnsureVisible in altre lingue.

Ho controllato scrollTop e scrollTo ma sembrano aringhe rosse.

Qualcuno può aiutare?

97
Angus McCoteup

vecchia domanda, ma se qualcuno lo trova tramite google (come ho fatto io) e chi non vuole usare ancore o jquery; c'è una funzione javascript integrata per "saltare" a un elemento;

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

e cosa c'è di meglio; secondo le grandi tabelle di compatibilità su quirksmode, questo è supportato da tutti i principali browser !

369
futtta

Se non si desidera aggiungere un'estensione aggiuntiva, il codice seguente dovrebbe funzionare con 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;
        }
    });
23
Josh
22
George Mauer
<a href="#myAnchorALongWayDownThePage">Click here to scroll</a>

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

Nessuno scrolling di fantasia ma dovrebbe portarti lì.

15
mjallday

La difficoltà con lo scorrimento è che potrebbe non essere necessario solo scorrere la pagina per mostrare un div, ma potrebbe anche essere necessario scorrere all'interno di div scorrevoli su qualsiasi numero di livelli.

La proprietà scrollTop è disponibile su qualsiasi elemento DOM, incluso il corpo del documento. Impostandolo, puoi controllare fino a che punto viene fatto scorrere qualcosa. Puoi anche usare le proprietà clientHeight e scrollHeight per vedere quanto è necessario lo scorrimento (lo scorrimento è possibile quando clientHeight (viewport) è inferiore a scrollHeight (l'altezza del contenuto).

Puoi anche usare la proprietà offsetTop per capire dove si trova un elemento nel contenitore.

Per creare una routine "scroll in view" veramente generica da zero, dovresti iniziare dal nodo che vuoi esporre, assicurarti che sia nella parte visibile del suo genitore, quindi ripetere lo stesso per il genitore, ecc., Tutto il modo fino a raggiungere la cima.

Un passaggio sarebbe simile a questo (codice non testato, non controllo dei casi Edge):

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

Questo ha funzionato per me

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

Puoi usare il metodo Element.scrollIntoView() come menzionato sopra. Se lo lasci senza parametri all'interno, avrai un instant brutto scroll. Per impedire che sia possibile aggiungere questo parametro - behavior:"smooth".

Esempio:

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

Sostituisci semplicemente scroll-here-plz con il tuo div o elemento su un sito web. E se vedi il tuo elemento nella parte inferiore della finestra o la posizione non è quella che ti aspettavi, gioca con il parametro block: "". Puoi usare block: "start", block: "end" o block: "center".

Ricorda: usa sempre i parametri all'interno di un oggetto {}.

Se avessi ancora problemi, vai a https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

C'è una documentazione dettagliata per questo metodo.

6
Smelino

Risposta inviata qui - stessa soluzione al tuo problema.

Modifica: la risposta di JQuery è molto bella se vuoi una pergamena fluida - non l'avevo mai vista in azione prima.

5
Chuck

Perché non un'ancora con nome?

4
Bloodhound

La proprietà che ti serve è location.hash. Per esempio:

location.hash = 'top'; // salta all'ancora "top"

Non so come fare l'animazione di scorrimento Nice senza l'uso di dojo o qualche toolkit del genere, ma se hai solo bisogno di saltare su un'ancora, location.hash dovrebbe farlo.

(testato su FF3 e Safari 3.1.2)

4
Scott Swezey

Non posso aggiungere un commento alla risposta di futtta sopra, ma per uno scorrimento più fluido usare:

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

Per scorrere senza intoppi questo codice è utile

$('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

Personalmente ho trovato la risposta basata su jQuery di Josh qui sopra come la migliore che ho visto, e ho funzionato perfettamente per la mia applicazione ... ovviamente, stavo già usando jQuery ... sicuramente non avrei incluso l'intera libreria jQ solo per quell'unico scopo.

Saluti!

EDIT: OK ... quindi pochi secondi dopo aver pubblicato questo, ho visto un'altra risposta solo sotto la mia (non sono sicuro se sotto di me ancora dopo una modifica) che diceva di usare:

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

Funziona perfettamente e con molto meno codice della versione jQuery! Non avevo idea che ci fosse una funzione integrata in JS chiamata .scrollIntoView (), ma eccola! Quindi, se vuoi l'animazione di fantasia, vai su jQuery. Veloce e sporco ... usa questo!

0
Lelando

Esiste un plugin jQuery per il caso generale dello scorrimento su un elemento DOM, ma se le prestazioni sono un problema (e quando non lo è?), Suggerirei di farlo manualmente. Ciò comporta due passaggi:

  1. Trovare la posizione dell'elemento a cui si sta scorrendo.
  2. Scorrendo fino a quella posizione.

quirksmode fornisce una buona spiegazione del meccanismo alla base del primo. Ecco la mia soluzione preferita:

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

Usa il casting da null a 0, che non è corretto Etichetta in alcuni ambienti, ma mi piace :) La seconda parte usa window.scroll. Quindi il resto della soluzione è:

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

Ecco!

0
Andrey Fedorov

scrollTop (IIRC) è dove nel documento viene fatta scorrere la parte superiore della pagina. scrollPer scorrere la pagina in modo che la parte superiore della pagina sia il punto specificato.

Ciò di cui hai bisogno qui sono alcuni stili manipolati Javascript. Di 'che se volevi il div fuori dallo schermo e scorrendo da destra avresti impostato l'attributo sinistro del div sulla larghezza della pagina e poi lo avresti ridotto di un determinato importo ogni pochi secondi fino a quando non è dove vuoi.

Questo dovrebbe indirizzarti nella giusta direzione.

Ulteriore: mi dispiace, pensavo che volessi un div separato per "saltar fuori" da qualche parte (un po 'come fa questo sito a volte), e non spostare l'intera pagina in una sezione. L'uso corretto delle ancore avrebbe ottenuto questo effetto.

0
Benjamin Autin