ページにアンカーポイントを追加するにはどうすればよいですか?アンカーポイントを追加する 2 つの方法-jsチュートリアル-php.cn

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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

青灯夜游

Nov 13, 2018 pm 02:06 PM

html jquery アンカーポイント

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

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

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

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

単純なケース:

<html>
<head></head>
<body>
<!--设置锚点的a标签-->
<a href=&#39;#miao&#39;>跳一跳</a>
<br />
<!--跳转到的锚点位置-->
<h3 id=&#39;miao&#39;>跳到这里..</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=&#39;jumpNow&#39;>跳一跳</span>
<br />
<!--跳转到的锚点位置-->
<h3 id=&#39;imhere&#39;>跳到这里...</h3>
</body>

</html>

ログイン後にコピー

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

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

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

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。