ホームページ > 記事 > ウェブフロントエンド > ページにアンカーポイントを追加するにはどうすればよいですか?アンカーポイントを追加する 2 つの方法
ページにアンカーポイントを追加するにはどうすればよいですか?アンカーポイントを追加する 2 つの方法
- 青灯夜游転載
- 2018-11-13 14:06:374470ブラウズ
アンカーポイントをページに追加するにはどうすればよいですか?この記事では、ページにアンカーポイントを追加する 2 つの方法を紹介します。困っている友人は参考にしていただければ幸いです。
方法 1: a タグを使用して
1 を追加します。 a タグの href 属性を設定することで、指定された id にジャンプします。
2. a タグの href 属性値の前に識別子として # を追加します。
単純なケース:
<html> <head></head> <body> <!--设置锚点的a标签--> <a href='#miao'>跳一跳</a> <br /> <!--跳转到的锚点位置--> <h3 id='miao'>跳到这里..</h3> </body> </html>
これ この方法には、アドレス バーのパラメータの変更、突然のジャンプ、ユーザーにとって不親切など、多くの欠点があります...
したがって、詳細に注意を払い、こだわりを持っている場合は、 -この領域の強迫性障害の場合は、次のこの方法を使用することをお勧めします。
方法 2: jQuery のアニメーション アニメーションを使用してジャンプする
早速、コードから始めましょう:
<html>
<head>
<title></title>
<script>
$(document).ready(function () {
//点击触发事件
$("#jumpNow").click(function () {
$("html,body").animate({
scrollTop: $("#imhere").offset().top//跳转到的位置
}, {
duration: 400,//预定速度
easing: "swing",//动画效果.swing:在开头/结尾移动慢，在中间移动快;"linear": 匀速移动
});
});
});
</script>
</head>
<body>
<!--设置锚点的标签-->
<span id='jumpNow'>跳一跳</span>
<br />
<!--跳转到的锚点位置-->
<h3 id='imhere'>跳到这里...</h3>
</body>
</html> jQuery の animate はページアニメーションを実装する関数で、比較的強力でアンカーポイントジャンプを実装するには十分です。 animate 関数を学びたい場合は、[jQuery-Animate を徹底学習する (1)]
このメソッドは、アニメーションのジャンプ速度と方法を制御できます。 、アドレスバーは変更されません。パラメータは比較的エレガントです。この方法を使うのがおすすめです！
概要: 上記がこの記事の全内容です。他のビデオ チュートリアルをご覧になりたい場合は、jQuery チュートリアル をお勧めします。
以上がページにアンカーポイントを追加するにはどうすればよいですか?アンカーポイントを追加する 2 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。