È possibile creare un collegamento ipertestuale verso una posizione di scorrimento specifica in una pagina Web? Ad esempio, vorrei creare un collegamento a http://www.stackoverflow.com/ , ma con la pagina scesa di 100 pixel.
Risposte:
Puoi scorrere fino a una data posizione usando il plugin jQuery scrollTo . Se dai un'occhiata alla sua pagina demo , vedrai che il plugin è in grado di avere molte opzioni diverse, incluso lo scorrimento fino a una determinata posizione. Ciò significherebbe che dovresti controllare il JavaScript del target, quindi questo potrebbe non essere adatto per un link a un sito esterno.
Il link alla vaniglia verso un punto della pagina è tramite un punto di ancoraggio già presente nella pagina.
Questo può essere creato usando il <a>…</a>tag. Si noti che il collegamento specificato in "punto di ancoraggio" (sopra) ha #h-12.2alla fine. Ciò corrisponde a <a id="h-12.2">12.2</a>incorporato nell'HTML che costituisce la pagina e, quando si fa clic, riposizionerà la vista della pagina su questo ancoraggio.
Si noti che prima di HTML5, l' nameattributo era usato nel tag anchor, ma non è più supportato e l' idattributo dovrebbe essere usato al suo posto ( riferimento ). Questo significa anche che puoi usare qualsiasi elemento per un tag anchor, non sei limitato <a>all'elemento.
Simile alla risposta di Paul, puoi anche collegare alla prima occorrenza di un ID tag in un documento HTML. Tuttavia, questo non sarà un numero esatto di pixel.
Ad esempio, collega / scorri fino alla domanda o alle risposte di questa pagina .
Prova a fare clic con il tasto destro e ispezionare gli elementi sulla pagina. Troverai i <a>tag, quelli sono i punti di ancoraggio.
Quindi elimina la <prima e la prima in amodo che non vengano visualizzate come collegamenti. Puoi effettivamente vedere gli effetti mentre scrivi nella casella di risposta quando ti mostra l'anteprima qui sotto.
a href="/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#question-header">question /a>
e
a href="/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#answers">answers /a>
Come puoi vedere, l'unica differenza è proprio alla fine dove l'ancora prende il nome dal #simbolo della sterlina ( ). il nome dopo il >è per come il collegamento legge all'utente.
In questo caso "domanda-intestazione" si legge come "domanda" e le risposte sembrano essere le stesse.
Quindi quanto segue dovrebbe essere collegato al commento di Mike . Dal momento che il loro punto di ancoraggio è382094
Per chiarire, puoi semplicemente trovare l'ancora e aggiungere il #dopo il tuo link.
/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#question-header
/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#answers
/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#880079
questi ti porteranno in posti diversi nella stessa pagina.
Per collegarti a una posizione specifica di pixel in una pagina, posiziona il tag di ancoraggio all'interno di un div che sia posizionato in modo assoluto usando le coordinate "top: x left: y".
È possibile utilizzare Citebite per collegarsi a una posizione specifica di una pagina Web anche se non utilizza ID in quella posizione. È facile da usare. Basta andare al link che ho fornito qui e quindi incollare il pezzo di testo che si desidera mostrare prima dopo essere andato alla pagina Web nel campo di testo Preventivo e quindi fornire il collegamento della pagina Web nel campo di testo URL di origine. Quindi fare clic su Crea morso. Quindi genererà un collegamento. Quel collegamento sarà il collegamento desiderato.