Cette portion de code provient de CSS Tricks. On utilise ici la librairie jQuery pour faire en sorte que le clic sur une ancre de lien puisse se faire en visualisant le défilement de la page (vers le haut ou le bas selon le cas) plutôt que d’avoir un affichage instantané de la portion de page visée.
Son intérêt aussi c’est qu’il ajoute un focus sur l’élément visé, ce qui est une bonne chose en terme d’accessibilité.
jQuery(document).ready(function($){
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
}
});
}
}
});
});Il est possible d’avoir besoin d’indiquer un offset différent selon la taille de l’écran, c’est possible en passant par une gestion des media query dans JS.
// Créer une fonction pour viser une media query particulière
function screenMin1280() {
'use strict';
var mq = window.matchMedia("(min-width: 1280px)");
return mq.matches;
}
// Puis l'utiliser sous forme de condition
if ( screenMin1280() ) {
// Faire ceci
} else {
// Faire cela
}