JQuery lisse défilement lorsque vous cliquez sur un lien d’ancrage

Question

J'ai un couple de liens sur ma page. Une FAQ que les utilisateurs lisent lorsqu'ils visitent ma section d'aide.

À l'aide de l'Ancre des liens, je peux faire la page, faites défiler vers le point d'ancrage et de guider les utilisateurs.

Est-il un moyen de faire que le défilement lisse?

Quelque chose comme ceci: http://www.position-relative.net/creation/anchor/

Mais remarquez qu'il utilise une lib javascript personnalisé. Peut-être que jQuery propose des choses comme ça cuit?

Answer 1

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    return false;
});

Et voici le violon: http://jsfiddle.net/9SDLw/

---

Si votre élément cible ne dispose pas d'un ID, et vous êtes lier à elle de par sa name, utilisez ceci:

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
    }, 500);
    return false;
});

---

Pour des performances accrues, vous devez cache $('html, body') sélecteur, de sorte qu'il ne fonctionne pas à chaque fois un point d'ancrage est cliqué:

var $root = $('html, body');
$('a').click(function() {
    $root.animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    return false;
});

---

Si vous voulez que l'URL de mise à jour, le faire dans l' animate de rappel:

var $root = $('html, body');
$('a').click(function() {
    var href = $.attr(this, 'href');
    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });
    return false;
});

Answer 2

La syntaxe correcte est :

Answer 3

<pre><code></code><p>Cela a fonctionné parfaitement pour moi</p></pre>

Answer 4

<pre><code></code><p>Officiel : <a href="http://css-tricks.com/snippets/jquery/smooth-scrolling/" rel="nofollow">http://css-tricks.com/snippets/jquery/smooth-scrolling/</a></p></pre>

Answer 5

À l’aide de JQuery :