JQuery implémente simplement le défilement fluide des liens d'ancrage_jquery

Généralement, lorsque vous utilisez un point d'ancrage pour accéder à une position spécifiée sur la page, il passera immédiatement à la position spécifiée. Mais parfois, nous souhaitons effectuer une transition en douceur vers la position spécifiée, nous pouvons alors utiliser JQuery pour y parvenir simplement. effet. :

Par exemple, ici, nous allons accéder à l'emplacement spécifié avec l'identifiant du contenu en cliquant sur la balise 3499910bf9dac5ae3c52d5ede7383485.

<a id="turnToContent" href="#content"></a>

Ensuite, nous définissons le bloc de contenu avec l'identifiant comme contenu à l'emplacement souhaité. Ici, un div est utilisé pour simuler un article qui ne ressemble pas à un article. Il est préférable de placer ce div à l'arrière pour que l'effet soit plus évident. Si vous souhaitez simplement tester cet effet, vous pouvez utiliser une méthode simple et grossière et placer de nombreuses balises e388a4556c0f65e1904146cc1a846bee

<div id="content">
<h2>
<a href="###">HTML5</a>
</h2>
<p>
html5html5html5
</p>
<p class="addMes">标签： <span>HTML5</span><small>2015年4月19日</small></p>
</div>

Enfin, JQuery est utilisé pour obtenir un effet de transition en douceur :

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

Fait !

Continuons à l'améliorer,

$(function(){  
  $('a[href*=#],area[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) {
        var targetOffset = $target.offset().top;
        $('html,body').animate({
          scrollTop: targetOffset
        },
        1000);
        return false;
      }
    }
  });
})

L'avantage du code amélioré est que cliquer sur le lien d'ancrage fera défiler en douceur jusqu'au point d'ancrage, et le suffixe de l'URL du navigateur n'a pas le mot ancre. Il peut être implémenté sans modifier le code ci-dessus pendant l'utilisation.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.