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.

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

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

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