JQuery は、同じ page_jquery 上のアンカー リンク間のスムーズなスクロールを実装します。

私は、Web 開発のフロントエンドに常に JQuery を使用してきました。JQuery が思っていたよりもはるかに強力であることに気づいたのは、JQuery に触ってからです。特に、互換性が高いので、JS を置き換えることができるいくつかの面白くてクールなものをすべて JQuery を使用することにしました。

今日のトピックは JQuery から紹介します。JQuery を使用してアンカー リンク間のスムーズなスクロールを実現します。以前に JS を使用して実装されたページ アンカー ジャンプ バッファー効果を紹介しましたが、その効果は非常に優れており、同じページ上のアンカー リンク間のスムーズなスクロールを実現できます。 JQuery をロードすると、より短いコードで同じ効果を実現できます。

使用方法:

1. JQuery ライブラリをロードします。

2. キーコード:

$(document).ready(function() { 
$('a[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; 
} 
} 
}); 
});

読み込み順序を強調したいのですが、まず JQuery クラス ライブラリを参照してください。ちなみに、テストの結果、スクロール効果は互換性があり、すべてのブラウザで適用できますが、Opera では動作が少しおかしく、改善する必要があります。