Comment faire défiler la page HTML pour donner l’ancre?

Je voudrais faire le navigateur pour faire défiler la page à une ancre donnée, simplement en utilisant JavaScript.

J’ai spécifié un atsortingbut name ou id dans mon code HTML:

  .. 

ou

  

..

J’aimerais 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 près du haut de la partie visible de la page.

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

Aucun jQuery requirejs du tout!

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 native location.hash comme

 location.hash = '#' + anchorid; 

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); 

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/

 $(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. Il jettera une erreur de sélecteur:

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; } } }); }); 

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

Si vous souhaitez simplement accéder à l’élément cible, vous n’avez pas besoin de JavaScript:

 # the link: Click here to jump. # target element: 
Any kind of element.

Si vous voulez faire défiler la cible avec animation , veuillez vous reporter à la réponse de @ Shahil.

En 2018, vous n’avez pas besoin de jQuery pour quelque chose de simple comme celui-ci. La [scrollIntoView()][1] prend en charge une propriété ” behavior ” pour faire défiler en douceur les éléments de la page. Vous pouvez même mettre à jour l’URL du navigateur avec un hachage pour le rendre bookmarkable.

À partir de ce didacticiel sur le défilement des signets HTML , voici un moyen natif d’append automatiquement un défilement régulier à 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.getAtsortingbute('href')        let target = document.querySelector(hashval)        target.scrollIntoView({            behavior: 'smooth',            block: 'start'        })        history.pushState(null, null, hashval)        e.preventDefault()    }) } 

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 support que les options ci-dessous.

entrer la description de l'image ici

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

En savoir plus sur la méthode

Je sais que cette question est vraiment ancienne, mais j’ai trouvé une solution simple et simple de jQuery dans css-sortingcks . 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; } } }); }); 

Ceci est un script de travail qui fera défiler la page à l’ancre. Pour configurer, donnez simplement au lien d’ancrage un identifiant qui correspond à l’atsortingbut name de l’ancre que vous souhaitez faire défiler.

  

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’ aux liens que vous souhaitez animer

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