En raison de la nature de mon site, je dois souvent créer un lien vers des ancres figurant dans une page plutôt que vers la page elle-même. Un exemple peut être trouvé ici:jQuery scroll doux
Ce que je cherche est un code jQuery que je peux utiliser pour faire défiler lentement la page vers l'ancre, plutôt que de sauter directement à celle-ci.
Quelqu'un peut-il m'aider? Je vous remercie.
en supposant que votre html est:
<a href="#someid">click me</a>
<h1 id="someid">some heading<h1>
cela devrait fonctionner
$('a').click(function(e) {
e.preventDefault();
var targetOffset = $($(this).attr('href')).offset().top;
$('html,body').animate({ scrollTop: targetOffset - 100 }, 500);
});
Edit: Ce que Liam a dit (voir commentaire ci-dessous)
Ceci est quelque chose que je mis en place un certain temps arrière.
$('a', this)
.each(function(e) {
var url = $(this).attr('href').replace(/^\s/, '').replace(/\s$/, '');
var parts = url.split("#", 2);
var anchors = $("#" + parts[1] + ", a[name='" + parts[1] + "']");
if (anchors.length > 0) {
$(this).click(function(evt) {
evt.preventDefault();
$('html, body')
.animate({
scrollTop: $(anchors.get(0)).offset().top
}, {
duration: 1500,
specialEasing: {
scrollTop: 'easeOutQuint'
}
});
});
}
});
Si je modifié ce nouveau je remplacer mon ancre de filtrage avec $ ('a [href^= "#"]) le sélecteur de liam.
Merci pour la réponse, mais cela ne fonctionne pas correctement. Cela fonctionne bien pour les pages où le lien et l'ancre sont sur la même page, mais cela empêche tous les liens de fonctionner du tout. Un autre point à noter est que la plupart du temps, le lien vers l'ancre proviendra d'une autre page, il devra donc être capable de récupérer le # de l'URL. Merci. – Daniel
bien pour la première partie, ajoutez une classe au lien qui le désigne comme étant "même page" puis utilisez '$ ('a.myclass')' comme sélecteur. Pour la deuxième partie, je ne ferais pas cela. sonne comme une mauvaise utilisabilité –
Utilisez '$ ('a [href^=" # "]')' pour sélectionner uniquement les liens qui vont aux ancres de la page. – Liam