JavaScript per scorrere la pagina lunga fino a DIV

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 !

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

Che ne dici di JQuery ScrollTo - vedi questo codice di esempio

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

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

Nessuno scrolling di fantasia ma dovrebbe portarti lì.

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

Questo ha funzionato per me

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

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.

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.

Perché non un'ancora con nome?

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)

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

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

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!

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!

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.