JQuery は単にアンカーのスムーズスクロールを実装する links_jquery

通常、アンカーポイントを使用してページ上の指定した位置にジャンプする場合、指定した位置にすぐにジャンプしますが、指定した位置にスムーズに遷移したい場合は、JQueryを使用して簡単にこれを実現できます。効果:

たとえば、ここでは 3499910bf9dac5ae3c52d5ede7383485 をクリックすると、コンテンツの ID で指定された場所にジャンプします。

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

次に、目的の場所にコンテンツとして ID を持つコンテンツ ブロックを設定します。ここでは、記事に見えない記事をシミュレートするために div が使用されています。この効果をより明確に確認するには、この div を後ろに置くのが最善です。この効果をテストしたいだけの場合は、その前に多くの 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>

最後に、JQuery を使用してスムーズな遷移効果を実現します。

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

完了!

引き続き改善していきましょう。

$(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;
      }
    }
  });
})

改良されたコードの利点は、アンカー リンクをクリックするとアンカー ポイントまでスムーズにスクロールし、ブラウザの URL 接尾辞にアンカーという単語が含まれないことです。使用中に上記のコードを変更することなく実装できます。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。