web-dev-qa-db-fra.com

Faites défiler par programme jusqu'à une balise d'ancrage

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 lien "GoTo Label2" pour faire défiler jusqu'à la région appropriée sur la page à travers le code?

EDIT : Une alternative acceptable serait de faire défiler jusqu'à un élément avec un identifiant unique, qui existe déjà sur ma page. J'ajouterais les balises d'ancrage si c'est une solution viable.

asp.netnavigationanchor
43
Anders

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 divs défilables, etc. afin que le contenu soit visible.

73
MikeeMike

En utilisant javascript:

window.location.href = '#label2';

Si vous devez le faire à partir du serveur/code derrière, vous pouvez simplement émettre ce Javascript et l'enregistrer en tant que script de démarrage pour cette page.

11
CubanX

Passer à une ancre côté serveur, par exemple c #.

ClientScript.RegisterStartupScript(this.GetType(), "hash", "location.hash = '#form';", true);
3
Gareth Williams

Je suppose que cela fonctionnera:

window.location="<yourCurrentUri>#label2";
2
mkoeller

La solution

document.getElementById('MyID').scrollIntoView(true);

fonctionne bien dans presque tous les navigateurs, alors que j'ai remarqué que dans certains navigateurs ou dans certains mobiles (comme certaines versions de Blackberry) la fonction "scrollIntoView" n'est pas reconnue, donc je considérerais 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";
1
sebarmeli

Si l'élément est une balise d'ancrage, vous devriez pouvoir faire:

document.getElementsByName('label2')[0].focus();
1
tvanfosson

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';
0
Ken Pespisa

pas de "#" lorsque vous utilisez window.location.hash

0
DannyR