Risposte:
vecchia domanda, ma se qualcuno lo trova tramite google (come ho fatto io) e chi non vuole usare anchor o jquery; c'è una funzione javascript incorporata per "saltare" a un elemento;
document.getElementById('youridhere').scrollIntoView();e cosa è ancora meglio; secondo le ottime tabelle di compatibilità su quirksmode, questo è supportato da tutti i principali browser !
document.getElementById('#something').scrollIntoView({ behavior: 'smooth', block: 'center' });
Se non vuoi aggiungere un'estensione extra, 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: guarda questo codice di esempio
<a href="#myAnchorALongWayDownThePage">Click here to scroll</a>
<A name='myAnchorALongWayDownThePage"></a>Nessuno scorrimento di fantasia ma dovrebbe portarti lì.
La difficoltà con lo scorrimento è che potresti non solo aver bisogno di scorrere la pagina per mostrare un div, ma potresti dover scorrere anche 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 quanto in basso viene fatto scorrere qualcosa. Puoi anche usare le proprietà clientHeight e scrollHeight per vedere quanto è necessario lo scorrimento (lo scorrimento è possibile quando clientHeight (viewport) è minore di scrollHeight (l'altezza del contenuto).
È inoltre possibile utilizzare la proprietà offsetTop per capire dove si trova un elemento nel contenitore.
Per creare una routine di "scorrimento nella visualizzazione" veramente generica da zero, è necessario iniziare dal nodo che si desidera esporre, assicurarsi che sia nella parte visibile del genitore, quindi ripetere lo stesso per il genitore, ecc. fino a raggiungere la cima.
Un passaggio di questo sarebbe simile a questo (codice non testato, non controllo dei casi limite):
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);
}
}Puoi usare il Element.scrollIntoView()metodo come menzionato sopra. Se lo lasci senza parametri all'interno, avrai un brutto scorrimento istantaneo . Per evitare ciò è possibile aggiungere questo parametro: behavior:"smooth" .
Esempio:
document.getElementById('scroll-here-plz').scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});Sostituisci semplicemente scroll-here-plzcon il tuo divelemento o su un sito web. E se vedi il tuo elemento nella parte inferiore della finestra o la posizione non è quella che ti aspetteresti, gioca con i parametri block: "". Puoi usare block: "start", block: "end"oblock: "center" .
Ricorda: usa sempre i parametri all'interno di un oggetto {}.
Se hai ancora problemi, vai a https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
È disponibile una documentazione dettagliata per questo metodo.
La proprietà di cui hai bisogno è location.hash. Ad esempio:
location.hash = 'top'; // salta all'ancora con nome "in alto
Non so come fare la bella animazione di scorrimento senza l'uso del dojo o di qualche toolkit del genere, ma se ti serve solo per saltare a 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 usa:
onClick="document.getElementById('more').scrollIntoView({block: 'start', behavior: 'smooth'});"scrollTop (IIRC) è dove nel documento si scorre la parte superiore della pagina. scrollTo scorre la pagina in modo che la parte superiore della pagina sia dove specifichi.
Quello che ti serve qui sono alcuni stili manipolati da Javascript. Diciamo che se vuoi il div fuori dallo schermo e scorri da destra, imposteresti l'attributo sinistro del div alla larghezza della pagina e poi lo diminuirai di una quantità impostata ogni pochi secondi fino a quando non è dove vuoi.
Questo dovrebbe indirizzarti nella giusta direzione.
Aggiuntivo: Mi dispiace, pensavo volessi che un div separato 'saltasse fuori' da qualche parte (un po 'come fa a volte questo sito) e non sposti l'intera pagina in una sezione. Un uso corretto delle ancore otterrebbe questo effetto.
Esiste un plug-in jQuery per il caso generale di scorrimento su un elemento DOM, ma se le prestazioni sono un problema (e quando non lo sono?), Suggerirei di farlo manualmente. Ciò comporta due passaggi:
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 zero a 0, che non è l'etichetta corretta 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!
Personalmente ho trovato la risposta basata su jQuery di Josh sopra per essere la migliore che ho visto e ha funzionato perfettamente per la mia applicazione ... ovviamente, stavo già usando jQuery ... di certo non avrei incluso l'intera libreria jQ solo per quello uno scopo.
Saluti!
EDIT: OK ... quindi pochi secondi dopo aver pubblicato questo, ho visto un'altra risposta appena sotto la mia (non sono sicuro se ancora sotto di me dopo una modifica) che diceva di usare:
document.getElementById ( 'your_element_ID_here') scrollIntoView ().;
Funziona perfettamente e con molto meno codice rispetto alla versione jQuery! Non avevo idea che ci fosse una funzione incorporata in JS chiamata .scrollIntoView (), ma è così! Quindi, se vuoi l'animazione fantasia, vai a jQuery. Veloce e sporco ... usa questo!
Per uno scorrimento fluido 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;
}
}
});Correggimi se sbaglio ma sto leggendo la domanda ancora e ancora e penso ancora che Angus McCoteup chiedesse come impostare un elemento da posizionare: fisso.
Angus McCoteup, controlla http://www.cssplay.co.uk/layouts/fixed.html - se vuoi che il tuo DIV si comporti come un menu lì, dai un'occhiata a un CSS lì