Comment faire défiler la page HTML pour donner l'ancre en utilisant jQuery ou Javascript?

Question

Je voudrais faire un navigateur pour faire défiler la page pour donner l'ancre, simplement en utilisant javascript.

J'ai spécifié l'attribut name ou id dans mon code html:

  <a name="anchorName">..</a>
 

ou

  <h1 id="anchorName2">..</h1>
 

Je voudrais obtenir le même effet en naviguant sur http://server.com/path#anchorName . La page doit être défilée pour que l'ancre soit en haut de la partie visible de la page.

Answer 1

 function scrollTo(hash) {
    location.hash = "#" + hash;
}
 

Aucun jQuery requis du tout!

Answer 2

Plus simple:

 element_to_scroll_to = document.getElementById('anchorName2');
element_to_scroll_to.scrollIntoView();
 

Answer 3

Vous pouvez utiliser jQuerys .animate(), .offset() et scrollTop. Comme

$(document.body).animate({
    'scrollTop':   $('#anchorName2').offset().top
}, 2000);

exemple de lien: http://jsbin.com/unasi3/edit

Si vous ne voulez pas pour animer utilisation .scrollTop() comme

$(document.body).scrollTop($('#anchorName2').offset().top);

ou javascript natif location.hash comme

location.hash = '#' + anchorid;

Answer 4

Une excellente solution par James, mais le défilement régulier semble avoir des problèmes dans Firefox.

L'écriture de cette manière fonctionne également dans Firefox.

 (function($) {
    $(document).ready(function() {
         $('html, body').animate({
           'scrollTop':   $('#anchorName2').offset().top
         }, 2000);
    });
})(jQuery);
 

Answer 5

$(document).ready ->
  $("a[href^='#']").click ->
    $(document.body).animate
      scrollTop: $($(this).attr("href")).offset().top, 1000