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 .

<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

<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.