Je voudrais que le navigateur fasse défiler la page jusqu'à une ancre donnée, simplement en utilisant JavaScript.

J'ai spécifié un nameou un idattribut dans mon code HTML:

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

ou

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

J'aimerais obtenir le même effet que vous obtiendriez en naviguant vers http://server.com/path#anchorName. La page doit être défilée de sorte que l'ancre se trouve près du haut de la partie visible de la page.

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

Aucune jQuery requise du tout!

Bien plus simple:

var element_to_scroll_to = document.getElementById('anchorName2');
// Or:
var element_to_scroll_to = document.querySelectorAll('.my-element-class')[0];
// Or:
var element_to_scroll_to = $('.my-element-class')[0];
// Basically `element_to_scroll_to` just have to be a reference
// to any DOM element present on the page
// Then:
element_to_scroll_to.scrollIntoView();

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 animer, utilisez .scrollTop () comme

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

ou javascripts natifs location.hashcomme

location.hash = '#' + anchorid;

Excellente solution par jAndy, mais le défilement fluide semble avoir des problèmes de fonctionnement dans Firefox.

L'écrire de cette façon fonctionne également dans Firefox.

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

Pure js 2018-2020:

Il existe un moyen très pratique de faire défiler jusqu'à l'élément:

el.scrollIntoView({
  behavior: 'smooth', // smooth scroll
  block: 'start' // the upper border of the element will be aligned at the top of the visible part of the window of the scrollable area.
})

Mais pour autant que je comprends, il n'a pas un tel soutien que les options ci-dessous.

En savoir plus sur la méthode.

S'il est nécessaire que l'élément soit en haut:

const element = document.querySelector('#element')
const topPos = element.getBoundingClientRect().top + window.pageYOffset

window.scrollTo({
  top: topPos, // scroll so that the element is at the top of the view
  behavior: 'smooth' // smooth scroll
})

Exemple de démonstration sur Codepen

Si vous souhaitez que l'élément soit au centre:

const element = document.querySelector('#element')
const rect = element.getBoundingClientRect() // get rects(width, height, top, etc)
const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

window.scroll({
  top: rect.top + rect.height / 2 - viewHeight / 2,
  behavior: 'smooth' // smooth scroll
});

Exemple de démonstration sur Codepen

Soutien:

Ils écrivent que scrollc'est la même méthode que scrollTo, mais le support montre mieux dansscrollTo .

En savoir plus sur la méthode

Une solution javascript pure sans JQuery. Testé sur Chrome & Ie, non testé sur IOS

function ScrollTo(name) {
  ScrollToResolver(document.getElementById(name));
}

function ScrollToResolver(elem) {
  var jump = parseInt(elem.getBoundingClientRect().top * .2);
  document.body.scrollTop += jump;
  document.documentElement.scrollTop += jump;
  if (!elem.lastjump || elem.lastjump > Math.abs(jump)) {
    elem.lastjump = Math.abs(jump);
    setTimeout(function() { ScrollToResolver(elem);}, "100");
  } else {
    elem.lastjump = null;
  }
}

démo: https://jsfiddle.net/jd7q25hg/12/

En 2018, vous n'avez pas besoin de jQuery pour quelque chose de simple comme ça. La scrollIntoView()méthode intégrée prend en charge une behaviorpropriété " " pour faire défiler en douceur vers n'importe quel élément de la page. Vous pouvez même mettre à jour l'URL du navigateur avec un hachage pour le mettre en signet.

À partir de ce didacticiel sur le défilement des signets HTML , voici une façon native d'ajouter automatiquement un défilement fluide à tous les liens d'ancrage sur votre page:

let anchorlinks = document.querySelectorAll('a[href^="#"]')
 
for (let item of anchorlinks) { // relitere 
    item.addEventListener('click', (e)=> {
        let hashval = item.getAttribute('href')
        let target = document.querySelector(hashval)
        target.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
        })
        history.pushState(null, null, hashval)
        e.preventDefault()
    })
}

Faites défiler en douceur jusqu'à la bonne position (2019)

Obtenez des y coordonnées et une utilisation correcteswindow.scrollTo({top: y, behavior: 'smooth'})

const id = 'anchorName2';
const yourElement = document.getElementById(id);
const y = yourElement.getBoundingClientRect().top + window.pageYOffset;

window.scrollTo({top: y, behavior: 'smooth'});

Avec décalage

scrollIntoViewest également une bonne option, mais elle peut ne pas fonctionner parfaitement dans certains cas. Par exemple, lorsque vous avez besoin d'un décalage supplémentaire . Avec scrollTovous avez juste besoin d'ajouter ce décalage comme ceci:

const yOffset = -10; 

window.scrollTo({top: y + yOffset, behavior: 'smooth'});

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

La solution de CSS-Tricks ne fonctionne plus dans jQuery 2.2.0. Cela générera une erreur de sélection:

Erreur d'exécution JavaScript: erreur de syntaxe, expression non reconnue: a [href * = #]: not ([href = #])

Je l'ai corrigé en changeant le sélecteur. L'extrait complet est le suivant:

$(function() {
  $("a[href*='#']:not([href='#'])").click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
    if (target.length) {
      $('html,body').animate({
        scrollTop: target.offset().top
      }, 1000);
      return false;
    }
  }
 });
});

La plupart des réponses sont inutilement compliquées.

Si vous voulez simplement passer à l'élément cible, vous n'avez pas besoin de JavaScript:

# the link:
<a href="#target">Click here to jump.</a>

# target element:
<div id="target">Any kind of element.</div>

Si vous souhaitez faire défiler la cible avec animation , veuillez vous référer à la réponse de @ Shahil.

Cela marche:

$('.scroll').on("click", function(e) {

  e.preventDefault();

  var dest = $(this).attr("href");

  $("html, body").animate({

    'scrollTop':   $(dest).offset().top

  }, 2000);

});

https://jsfiddle.net/68pnkfgd/

Ajoutez simplement la classe 'scroll' à tous les liens que vous souhaitez animer

Il s'agit d'un script de travail qui fera défiler la page jusqu'à l'ancre. Pour configurer, donnez simplement au lien d'ancre un identifiant qui correspond à l'attribut name de l'ancre à laquelle vous souhaitez faire défiler.

<script>
jQuery(document).ready(function ($){ 
 $('a').click(function (){ 
  var id = $(this).attr('id');
  console.log(id);
  if ( id == 'cet' || id == 'protein' ) {
   $('html, body').animate({ scrollTop: $('[name="' + id + '"]').offset().top}, 'slow'); 
  }
 }); 
});
</script>

Je sais que cette question est vraiment ancienne, mais j'ai trouvé une solution jQuery facile et simple dans css-tricks . C'est celui que j'utilise maintenant.

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

une solution vue2 ... ajouter une propriété de données simple pour forcer simplement la mise à jour

  const app = new Vue({ 
  ... 

  , updated: function() {
           this.$nextTick(function() {
           var uri = window.location.href
           var anchor = ( uri.indexOf('#') === -1 ) ? '' : uri.split('#')[1]
           if ( String(anchor).length > 0 && this.updater === 'page_load' ) {
              this.updater = "" // only on page-load !
              location.href = "#"+String(anchor)
           }
         })
        }
     });
     app.updater = "page_load"

 /* smooth scrolling in css - works in html5 only */
 html, body {
     scroll-behavior: smooth;
 }

la façon la plus simple de faire défiler la page jusqu'à une ancre donnée est de taper votre style.css * {scroll-behavior: smooth;} et dans votre navigation html, utilisez #NameOfTheSection

*{scroll-behavior: smooth;}

<a href="#scroll-to">Home<a/>

<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>

<section id="scroll-to">
<p>it will scroll down to this section</p>
</section>