1 はじめに
a タグの href 属性は、href で指定されたページまたは場所にジャンプできるハイパーリンク ターゲットの URL を指定するために使用されます。
アンカーは、アンカー URL を使用する ID を使用して、現在のページ内の指定された場所にジャンプできます。タイトルへのリンク
をクリックすると、これがタイトルにジャンプします。下部のリンクはこのモジュールにリンクできます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div>
<a id="top">这是标题，底部链接可以链接到这</a>
</div>
<div>
<a href="#top">链接到标题</a>
</div>
</body>
</html>
ただし、実際のアプリケーションでは、クリック後、アニメーションなしでページ上の指定された位置に直接ジャンプし、ジャンプのプロセスは非常に鈍くなります。
アンカーポイントをクリックすると、css/jsの2つの方法で指定した位置までスムーズにスクロールできます。
2. 実施方法
2.1 CSSの実装
スクロールするコンテナ要素にscroll-behavior:smoothを記述すると、コンテナのスクロールがスムーズになります。
html, body {
position: relative;
height: 100%;
scroll-behavior: smooth;
}
スクロール動作プロパティは、スクロールボックスのスクロール動作を指定します。
scroll-behavior： smooth | auto ;
auto (デフォルト値): スクロール ボックスが指定された位置まですぐにスクロールすることを示します。
スムーズ: ページをスクロールするときに、トップ ボタンやアンカー ポイントに戻るなど、指定された位置に直接スクロールするのではなく、スムーズ スクロールが使用されることを示します。
3.1 js実装
$("a").click(function() {
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top + "px"
}, 1000);
return false;
});
offset()メソッドは、ドキュメントに対する選択された要素の左または上のオフセット座標を設定または返します。(注: offset() メソッドは jquery のメソッドであり、jquery を使用するには導入する必要があります。)
$(".div").offset() 获得位移对象
$(".div").offset().top 获得位移高度
$(this).attr("href") は、クリックした a タグの href 属性値を取得します。
scrollTop()メソッドは、選択した要素の垂直スクロール バーの位置を設定または返します。たとえば、scrollTop: 100px は、上から 100px までスライドすることを意味します。
animate()メソッドは、CSS スタイルを通じて要素をある状態から別の状態に変更し、CSS プロパティ値を徐々に変更することで、アニメーション効果を作成できます。1000 はアニメーションの完了時間を指します: 1000 ミリ秒。
お役に立てましたら、忘れずにトリプルリンクをクリックしてください