Javascript: Créer des ancres pour naviguer dans une page

Author:

Javascript: Créer des ancres pour naviguer dans une page
{filelink=3354}


  

  
  
     


Exemple des ancres /title>
<script>
function goNextAnchor(where) {
    window.location.hash = where;
}
function addEvent(elem, evtType, func) {
    if (elem.addEventListener) {
        elem.addEventListener(evtType, func, false);
    } else if (elem.attachEvent) {
        elem.attachEvent("on" + evtType, func);
    } else {
        elem["on" + evtType] = func;
    }
}
addEvent(window, "load", function() {
    addEvent(document.getElementById("next1"), "click", function(evt) 
    {goNextAnchor("sec1")});
    addEvent(document.getElementById("next2"), "click", function(evt) 
    {goNextAnchor("start")});
});
</script>
</head>
<body>
<a id="start" name="start">Haut</a>
<form>
    <input type="button" id="next1" name="next" value="NEXT" />
</form>
<hr />
<a id="sec1" name="sec1">Section 1</a>
<form>
    <input type="button" id="next2" name="next" value="Haut" />
</form>
</body>
</html>




  </body>
</html>
</pre>
    </div><!-- .entry-content -->

    <div class="entry-meta">

      <div class="entry-category-content">
        <span>Categories:</span>
        Uncategorized      </div><!-- .category-title -->
      
      <!-- .tags-title -->

    </div><!-- .entry-meta -->

  </div><!-- .entry-body -->
  
</article><!-- #post-5952 -->  

	<nav class="navigation post-navigation" aria-label="Posts">
		<h2 class="screen-reader-text">Post navigation</h2>
		<div class="nav-links"><div class="nav-previous"><a href="https://java.mesexemples.com/java-persistane-exemple-de-duree-de-vie-de-callback-pour-une-sous-classe/" rel="prev"><span class="nav-subtitle">Previous:</span> <span class="nav-title">Java Persistane: Exemple de durée de Vie de CallBack pour une sous-classe.</span></a></div><div class="nav-next"><a href="https://java.mesexemples.com/java-pdf-configurer-laffichage-des-signets/" rel="next"><span class="nav-subtitle">Next:</span> <span class="nav-title">Java PDF:  Configurer l’affichage des Signets</span></a></div></div>
	</nav>
<div id="comments" class="comments-area">

	
	
		<div id="respond" class="comment-respond">
		<h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/javascript-creer-des-ancres-pour-naviguer-dans-une-page/#respond" style="display:none;">Cancel reply</a></small></h3><form action="https://java.mesexemples.com/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Comment <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p>
<p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p>
<p class="comment-form-url"><label for="url">Website</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p>
<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p>
<p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='5952' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p></form>	</div><!-- #respond -->
	
</div><!-- .comments-area -->

		</main><!-- #main -->

		<aside class="widget-area">
      <section id="block-2" class="widget widget_block widget_search"><form role="search" method="get" action="https://java.mesexemples.com/" class="wp-block-search__button-outside wp-block-search__text-button wp-block-search"    ><label class="wp-block-search__label" for="wp-block-search__input-1" >Search</label><div class="wp-block-search__inside-wrapper " ><input class="wp-block-search__input" id="wp-block-search__input-1" placeholder="" value="" type="search" name="s" required /><button aria-label="Search" class="wp-block-search__button wp-element-button" type="submit" >Search</button></div></form></section><section id="block-3" class="widget widget_block"><div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"><h2 class="wp-block-heading">Recent Posts</h2><ul class="wp-block-latest-posts__list wp-block-latest-posts"><li><a class="wp-block-latest-posts__post-title" href="https://java.mesexemples.com/hello-world/">Hello world!</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://java.mesexemples.com/java-pdf-envoyer-le-contenu-dune-jtable-dans-un-document-pdf-2/">Java PDF: Envoyer le contenu d’une JTable dans un document PDF</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://java.mesexemples.com/jsp-formulaire-jsp-comment-gerer-les-valeurs-par-defaut-des-parametres/">JSP: Formulaire JSP: comment gérer les valeurs par défaut des paramètres</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://java.mesexemples.com/java-source-ecrire-des-booleen-dans-un-fichier/">Java-source: Ecrire des booléen dans un fichier</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://java.mesexemples.com/jsp-utilisation-de-tableaux-multidimensionnels/">JSP: Utilisation de tableaux Multidimensionnels</a></li>
</ul></div></div></section><section id="block-4" class="widget widget_block"><div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"><h2 class="wp-block-heading">Recent Comments</h2><div class="no-comments wp-block-latest-comments">No comments to show.</div></div></div></section>    </aside><!-- .widget-area -->

	</div><!-- #primary -->


  <footer class="footer">
    <div class="container">
      <small class="footer__copy">
        © 2025 Java codes and news      </small>

      <section class="footer__info">
         <span>/</span>

        <span class="footer__info-text">
          Theme:        </span>
        
        <a class="footer__info-link" href="https://wordpress.org/themes/really-simple/" target="_blank" rel="noreferrer noopener">Really Simple</a> <span>/</span>

        <span class="footer__info-text">
          License:        </span>

        <a class="footer__info-link" href="https://www.gnu.org/licenses/gpl-3.0.html" target="_blank" rel="noreferrer noopener">
          GPLv3        </a>
      </section>
    </div>
  </footer>

  <script src="https://java.mesexemples.com/wp-includes/js/comment-reply.min.js?ver=6.5.5" id="comment-reply-js" async data-wp-strategy="async"></script>
</body>
</html>