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

StackOverflow https://stackoverflow.com/questions/265774

  •  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.

Était-ce utile?

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';
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top