web-dev-qa-db-fra.com

Comment faire défiler la page HTML à l'ancre donnée?

J'aimerais que le navigateur fasse défiler la page vers une ancre donnée, simplement en utilisant JavaScript.

J'ai spécifié un attribut name ou id dans mon code HTML:

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

ou

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

Je voudrais obtenir le même effet que vous obteniez en naviguant vers http://server.com/path#anchorName. Il faut faire défiler la page de sorte que l’ancre se trouve près du haut de la partie visible de la page.

javascriptjqueryhtmlscrollanchor
209
Juha Syrjälä
function scrollTo(hash) {
    location.hash = "#" + hash;
}

Pas besoin de jQuery!

300
Dean Harding

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();
196
Armando Pérez Marqués

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 souhaitez pas animer, utilisez .scrollTop () like

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

ou javascripts natif location.hash comme

location.hash = '#' + anchorid;
121
jAndy

Excellente solution de jAndy, mais le défilement lisse semble avoir des problèmes de travail 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);
30
5hahiL

Une solution javascript pure sans JQuery. Testé sur Chrome & I.e, 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/

24
Michael Whinfrey

2018 Pure js:

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 sache, il n’a pas un aussi bon soutien que les options ci-dessous.

 enter image description here

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 top = element.getBoundingClientRect().top

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

Exemple de démonstration sur Codepen

Si vous voulez 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 scroll est la même méthode que scrollTo, mais le support montre mieux dans scrollTo.

Plus d'informations sur la méthode

8
Илья Зеленько

En 2018, vous n'avez pas besoin de jQuery pour quelque chose d'aussi simple. La méthode [scrollIntoView()][1] intégrée prend en charge une propriété "behavior" permettant de faire défiler facilement tous les éléments de la page. Vous pouvez même mettre à jour l'URL du navigateur avec un hachage pour le rendre favori.

De ce tutoriel sur le défilement des signets HTML , voici une méthode native pour ajouter automatiquement un défilement fluide à tous les liens d'ancrage de 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()
    })
}
8
coco puffs
$(document).ready ->
  $("a[href^='#']").click ->
    $(document.body).animate
      scrollTop: $($(this).attr("href")).offset().top, 1000
6
cactis

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

Si vous voulez simplement sauter à 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 voulez faites défiler l'animation jusqu'à la cible , veuillez vous reporter à la réponse de @ Shahil.

5
Brian

La solution de CSS-Tricks ne fonctionne plus dans jQuery 2.2.0. Il y aura une erreur de sélection:

Erreur d'exécution JavaScript: erreur de syntaxe, expression non reconnue: a [href * = #]: non ([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;
    }
  }
 });
});
5
Bill Shihara

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

Obtenez juste la coordonnée correcte Y et utilisez window.scrollTo.

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

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

Défilement en douceur avec décalage

scrollIntoView est également une bonne option, mais peut ne pas fonctionner parfaitement dans certains cas. Par exemple, quand vous avez besoin d’un décalage supplémentaire . Avec scrollTo il suffit d’ajouter ce décalage à yCoordinate comme ceci:

const yOffset = -10; 

window.scrollTo({
    top: yCoordinate + yOffset,
    behavior: 'smooth'
});
2
Arseniy-II

Je sais que cette question est vraiment ancienne, mais j’ai trouvé une solution jQuery simple et facile 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;
      }
    }
  });
});
1
Horacio

jQuery("a[href^='#']").click(function(){
    jQuery('html, body').animate({
        scrollTop: jQuery( jQuery(this).attr('href') ).offset().top
    }, 1000);
    return false;
});

0
Adam Pery

Il s’agit d’un script de travail qui fait défiler la page jusqu’à l’ancre . Pour l’installation, donnez simplement au lien d’ancre un identifiant correspondant à l’attribut name de l’ancre sur 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>
0
Rudy Lister

une solution vue2 ... ajoute une simple propriété de données pour simplement forcer 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;
 }
0
Yordan Georgiev

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 le «défilement» de la classe aux liens que vous souhaitez animer.

0
Chuck Le Butt