ページにアンカーポイントを追加するにはどうすればよいですか?アンカーポイントを追加する 2 つの方法

アンカーポイントをページに追加するにはどうすればよいですか?この記事では、ページにアンカーポイントを追加する 2 つの方法を紹介します。困っている友人は参考にしていただければ幸いです。

方法 1: a タグを使用して

1 を追加します。 a タグの href 属性を設定することで、指定された id にジャンプします。

2. a タグの href 属性値の前に識別子として # を追加します。

単純なケース:

<!--设置锚点的a标签-->
<a>跳一跳</a>
<br>
<!--跳转到的锚点位置-->
<h3 id="跳到这里">跳到这里..</h3>

これ この方法には、アドレス バーのパラメータの変更、突然のジャンプ、ユーザーにとって不親切など、多くの欠点があります...

したがって、詳細に注意を払い、こだわりを持っている場合は、 -この領域の強迫性障害の場合は、次のこの方法を使用することをお勧めします。

方法 2: jQuery のアニメーション アニメーションを使用してジャンプする

早速、コードから始めましょう:

    <title></title>
<script>
    $(document).ready(function () {
        //点击触发事件
        $("#jumpNow").click(function () {
            $("html,body").animate({
                scrollTop: $("#imhere").offset().top//跳转到的位置
            }, {
                    duration: 400,//预定速度
                    easing: "swing",//动画效果.swing:在开头/结尾移动慢，在中间移动快;"linear": 匀速移动
                });
        });

});
</script>



<!--设置锚点的标签-->
<span>跳一跳</span>
<br>
<!--跳转到的锚点位置-->
<h3 id="跳到这里">跳到这里...</h3>

jQuery の animate はページアニメーションを実装する関数で、比較的強力でアンカーポイントジャンプを実装するには十分です。 animate 関数を学びたい場合は、[jQuery-Animate を徹底学習する (1)]

このメソッドは、アニメーションのジャンプ速度と方法を制御できます。 、アドレスバーは変更されません。パラメータは比較的エレガントです。この方法を使うのがおすすめです！

概要: 上記がこの記事の全内容です。他のビデオ チュートリアルをご覧になりたい場合は、jQuery チュートリアル をお勧めします。

以上がページにアンカーポイントを追加するにはどうすればよいですか?アンカーポイントを追加する 2 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。