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.
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.
Réponses:
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.
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.
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.
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".
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é.