Faites défiler par programme jusqu'à une balise d'ancrage
-
06-07-2019 - |
Question
Considérez le code suivant:
<a href="#label2">GoTo Label2</a>
... [content here] ...
<a name="label0"></a>More content
<a name="label1"></a>More content
<a name="label2"></a>More content
<a name="label3"></a>More content
<a name="label4"></a>More content
Existe-t-il un moyen d'émuler en cliquant sur le bouton "Aller à Label2"? lien pour faire défiler la page vers la région appropriée sur la page?
MODIFIER : une alternative acceptable serait de faire défiler jusqu'à un élément doté d'un identifiant unique, qui existe déjà sur ma page. J'ajouterais les balises d'ancrage s'il s'agit d'une solution viable.
La solution
Ce JS a généralement bien fonctionné pour moi si vous mettez également un ID sur l'élément:
document.getElementById('MyID').scrollIntoView(true);
C’est bien, car cela positionnera également les div, etc., de manière à ce que le contenu soit visible.
Autres conseils
Utilisation de javascript:
window.location.href = '#label2';
Si vous avez besoin de le faire à partir du code serveur / serveur précédent, vous pouvez simplement émettre ce Javascript et l'enregistrer en tant que script de démarrage pour cette page.
Passant du côté serveur à une ancre, par exemple, c #.
ClientScript.RegisterStartupScript(this.GetType(), "hash", "location.hash = '#form';", true);
Je suppose que cela fonctionnera:
window.location="<yourCurrentUri>#label2";
La solution
document.getElementById('MyID').scrollIntoView(true);
fonctionne bien dans presque tous les navigateurs, alors que je l’ai remarqué dans certains navigateurs ou dans certains appareils mobiles (comme certaines versions de Blackberry) "scrollIntoView". la fonction n’est pas reconnue, je considérerais donc cette solution (un peu plus laide que la précédente):
window.location.href = window.location.protocol + "//" + window.location.host +
window.location.pathname + window.location.search +
"#MyAnchor";
Si l'élément est une balise d'ancrage, vous devriez pouvoir faire:
document.getElementsByName('label2')[0].focus();
no " # " lorsque vous utilisez window.location.hash
vous pouvez simplement ouvrir la nouvelle URL avec le nom ajouté, par exemple http://www.example.com/mypage.htm#label2
En JavaScript,
location.href = location.href + '#label2';