2010-11-03 2 views
2

Je vois sur certains sites Web (comme StackOverflow, Yahoo, le département américain de la Sécurité intérieure, ...) un mot associé à un lien qui, lorsqu'il est cliqué, non seulement charge une page, mais affiche également cette page à l'endroit exact où le contenu lié au mot commence.Comment faire défiler par programmation à une position dans une page pour afficher le contenu souhaité (par opposition à afficher le haut de la page)

Comment l'obtenir avec ASP.NET MVC? (En passant, ai-je besoin javascript pour cela?)

Merci de nous aider

+0

[Pourquoi ne pas vérifier les réponses à la même question que celle que vous avez posée 3 minutes avant celle-ci?] (Http://stackoverflow.com/questions/4087838/how-to-scroll-programmatically-to-a-position-in- a-page-to-display-desired-content) – Jimmy

Répondre

5
<a href="#jumpHere">Go to the other content</a> 
<a name="jumpHere">Some content</a> 

également l'URL peut avoir /yourpage.html#jumpHere ou avec des variables, /yourpage.html?var1=foo&var2=bar#jumpHere.

Puisque nous parlons du hachage (#), il est généralement utilisé pour sauter à une partie spécifique de la page. A cause de cela, il ne rechargera pas toute la page. Ceci est utile pour les applications Web qui passent d'une vue à l'autre en utilisant uniquement AJAX. Pour que chaque vue puisse être mise en signet, JavaScript "enregistre" l'état (sur quelle vue vous vous trouvez) en utilisant location.hash dans l'URL. La prochaine fois que vous ouvrez l'URL, JavaScript la lit et charge la vue correcte. En HTML5, il est remplacé par pushState.

1

Vous devez créer une ancre nommée dans la page. Cela aura le résultat dont vous parlez, presque comme la création d'un "signet" dans une page. Pas de javascript requis.

d'abord, créez l'ancre en utilisant la balise <a> avec l'name attribut spécifié (dans ce cas, section1):

<a name="section1"></a> 

Ensuite, pour créer un lien vers ce point d'ancrage de la même page, il suffit d'utiliser quelque chose comme ça :

<a href="#section1">Go to Section 1</a> 

Si vous liez à ce point d'ancrage d'une autre page (dans ce cas, mypage.html), ajoutez #section1 à la fin de l'URL:

<a href="mypage.html#section1">Go to Section 1 in MyPage.html</a> 

Pour plus d'informations, voir here.

4

1) Trouver les coordonnées de l'élément sur la page

2) window.scrollTo(x,y)

+0

Depuis l'OP demandé une façon "programmatique" de le faire c'est ce que j'ai posté. Oui, un hachage simple est souvent le meilleur moyen. –

1

Son appelé une balise d'ancrage.

Placez ceci dans votre HTML.

<a name="name"></a> 

Si vous appelez cette URL, elle passera à cet endroit.

html-file.html#name 

Voir: http://www.w3schools.com/tags/tag_a.asp

1

Il est très simplement fait avec étiquette d'identification des éléments differnt html pour par exemple: - un élément div si elle est d'avoir « Pied de page » comme identifiant et est placé au bas de la page puis, http://url-address-to-thatpage.html#footer va charger la page et la faire défiler aussi le pied de page. (ajouter le "#idoftheelement" après l'URL de la page) Il est également possible de charger et de faire défiler la page avec javascript.

1

Une autre façon de le faire est avec l'attribut "id" si ce n'est pas un tag d'ancrage que vous souhaitez mettre en signet. Par exemple:

<div id="bookmark1">Content...</div> 

Ensuite, vous pouvez créer un lien vers elle avec une balise d'ancrage comme celui-ci:

<a href="#bookmark1">Go to content</a> 

Ou lien vers cet endroit sur la page en ajoutant un # bookmark1 à

http://yourwebsite.com/page#bookmark1 
Questions connexes