Comment créer un lien vers une position spécifique sur une page Web? [fermé]

14

Est-il possible de créer un lien hypertexte vers une position de défilement spécifique sur une page Web? Par exemple, je voudrais créer un lien vers http://www.stackoverflow.com/ , mais avec la page déroulée de 100 pixels.

html scrolling hyperlink Anderson Green
la source
J'aimerais qu'il existe un moyen de créer un lien vers une position spécifique en utilisant des pixels dans l'URL.
akinuri

Réponses:

3

Vous pouvez faire défiler jusqu'à une position donnée en utilisant les touches plugin jQuery scrollTo . Si vous regardez sa page de démonstration , vous verrez que le plugin est capable de nombreuses options différentes, y compris le défilement vers une certaine position. Cela signifierait toutefois que vous deviez contrôler le code JavaScript de la cible, ce qui pourrait ne pas convenir à un lien vers un site externe.

Amos M. Carpenter
la source
15

Le lien à la vanille quelque part dans la page est via un point d'ancrage déjà présent dans la page.

Ceci peut être créé en utilisant le <a>…</a> étiquette. Notez que le lien spécifié dans "point d'ancrage" (ci-dessus) a #h-12.2 à la fin. Cela correspond à <a id="h-12.2">12.2</a> intégré dans le HTML formant la page, et lorsque vous cliquez dessus repositionnera la vue de la page sur cette ancre.

Notez qu'avant HTML5, le name attribut a été utilisé dans la balise d'ancrage, mais n'est plus pris en charge et le id Cet attribut doit être utilisé à sa place ( référence ). Cela signifie également que vous pouvez utiliser n'importe quel élément pour une balise d'ancrage. Vous n'êtes pas limité à la <a> élément.

Paul
la source
6

Semblable à la réponse de Paul, vous pouvez également créer un lien vers la première occurrence d'un identifiant de tag dans un document HTML. Ce ne sera cependant pas un nombre exact de pixels.

Par exemple, lien / défilement vers cette page question ou réponses .

Mike Fitzpatrick
la source
6

Essayez de cliquer avec le bouton droit de la souris et d’inspecter les éléments sur la page. Vous trouverez le <a> balises, ce sont les points d'ancrage.

Puis sortez le < avant le premier et le dernier a afin qu'ils ne se présentent pas comme les liens. Vous pouvez réellement voir les effets tout en écrivant dans la zone de réponse quand elle vous montre l'aperçu ci-dessous.

a href="https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#question-header">question /a>

et

a href="https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#answers">answers /a>

Comme vous pouvez le constater, la seule différence réside à la toute fin, où l’ancre se nomme après la fourrière ( # ) symbole. le nom après le > est pour la façon dont le lien lit à l'utilisateur.

Dans ce cas, "en-tête de question" se lit comme "question" et les réponses sont identiques.

Ensuite, les liens suivants doivent être liés à Le commentaire de Mike . Depuis leur point d'ancrage est 382094

Pour clarifier, vous pouvez simplement trouver l’ancre et ajouter le # après votre lien.

https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#question-header

https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#answers

https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#880079

Tout cela vous mènera à différents endroits sur la même page.

Georgeq
la source
Cela fonctionne-t-il uniquement pour les identifiants ou pour les cours également? Par exemple, si j'avais un élément, par exemple, & lt; h3 class = "theClass" & gt; Header & lt; / h3 & gt ;, comment puis-je créer un lien vers cet élément qui n'a pas de valeur d'attribut ID?
Ulysses Alves
1

Pour créer un lien vers une position spécifique au pixel sur une page, placez la balise d'ancrage à l'intérieur d'un div qui est positionné de manière absolue en utilisant les coordonnées "top: x left: y".

Graeme
la source
J'ai utilisé cela pour construire un site responsive où le menu était fixé en haut. Les cibles normales placent le haut de la section placée derrière le menu. En utilisant la technique ci-dessus, il était facile d’aligner le haut des sections requises sur le bas du menu.
Graeme
0

Vous pouvez utiliser Citebite créer un lien vers une position spécifique d'une page Web même si elle n'utilise pas id dans cette position. C'est facile a utiliser. Allez simplement sur le lien que j'ai fourni ici, puis collez le bloc du texte que vous voulez montrer en premier après vous être rendu sur votre page Web dans le champ de texte Devis, puis indiquez le lien de la page Web dans le champ de texte Source URL. Cliquez ensuite sur Make Citebite. Ensuite, il va générer un lien. Ce lien sera votre lien souhaité.

Farabi Siddique
la source
1
Bienvenue sur Super User! Lisez s'il vous plaît Comment recommander un logiciel pour information minimale requise et des suggestions sur la façon de recommander un logiciel sur Super User. Pour que votre réponse reste utile, même si le ou les liens fournis sont rompus, ces détails doivent être modifiés dans votre réponse.
Twisty Impersonator
@Twisty Le lien fourni est le logiciel. C'est une application web. Cela semble suffisant. Cependant, Farabi, si vous êtes affilié à Citebite, vous devez le divulguer. Sinon, tu es bon.
Duncan X Simpson
@DuncanXSimpson Veuillez lire la méta publication que j'ai liée. Plus que le nom du logiciel et un lien sont nécessaires pour répondre aux normes du site.
Twisty Impersonator
@ Twisty 1. Fait. 5. D'accord, je suppose que vous pourriez plaider votre cause ici. Farabi, vous devriez donner une brève instruction sur la façon de l'utiliser. 6. Il n'y a rien de personnalisé. Cet outil est exactement ce dont OP avait besoin; Ni plus ni moins.
Duncan X Simpson
@ Twisty j'ai édité la réponse. Est-ce que ça va maintenant?
Farabi Siddique