HTML でのアンカーポイントの使用_PowerNode Java アカデミー

ここで、アンカーポイントを制御するいくつかの状況をまとめてみましょう。

1. 同じページ

<a name="add"></a><!-- アンカーポイントを定義 -->
<a href="#add">追加へジャンプ</a>

2. 異なるページでは、アンカーはa.htmlにあり、別のページからのリンクはこのアンカーにジャンプします。

<a href="a.html#add">a.add へジャンプ</a>

3. リンクをクリックすると、js イベントがトリガーされ、アンカーポイントにジャンプします。これを処理するには 2 つの方法があります。

最初のもの:

<a href="#add" onclick="add()">追加機能をトリガーし、追加アンカーポイントにジャンプします</a>

2番目のタイプ:

<div id="divNode"><!-- 内容 --></div><!-- ジャンプ先のノードを想定します -->
<a href="#" onclick="document.getElemetnById('divNode').scrollIntoView(true);return false;">scrollIntoView を通じてアンカー効果を実現する</a>

HTMLでアンカーの位置を設定するには、IDの位置、名前の位置、JSの位置など、いくつかの方法があります。これらの方法は必ずしも最も完全ではないので、以下を参照してください。

1. ID ポジショニングを使用する:

<a href="#1F" name="1F">アンカーポイント 1</a> 
<div 名="1F"> 
<p> 
11111111111 
</br> 
11111111111 
</br>11111111111 
</br>11111111111 
</br>11111111111 
</br> 
</p> 
</div>

この配置はどのラベルでも対象にできます。

2. 名前の配置を使用する:

<a href="#5F">アンカーポイント 5</a> 
</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> 
<a name="5F">1111111</href>

name 属性は a タグを見つけるためにのみ使用できますが、div などの他のタグを見つけるためには使用できません。

3. jsポジショニングを使用する

<li class="" onclick="javascript:document.getElementById('here').scrollIntoView()"></li>

例:

js アンカーポイントのスムーズな配置

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <ヘッド>
        <スタイル タイプ="text/css" mce_bogus="1">
            div.テスト{
                幅: 400ピクセル;
                マージン: 5px 自動;
                境界線: 1px 実線 #ccc;
            }
             
            div.test 強い {
                フォントサイズ: 16px;
                背景: #fff;
                下境界線: 1px 実線 #aaa;
                マージン: 0;
                表示: ブロック;
                パディング: 5px 0;
                テキスト装飾: 下線;
                色: #059B9A;
                カーソル: ポインタ;
            }
             
            div.test p {
                高さ: 400px;
                背景: #f1f1f1;
                マージン: 0;
            }
        </スタイル>
        <script type="text/javascript">
             
            関数 intval(v){
                v = parseInt(v);
                isNaN(v) ? 0 : v を返します。
            } // 要素情報を取得する function getPos(e){
                var l = 0;
                var t = 0;
                var w = intval(e.style.width);
                var h = intval(e.style.height);
                var wb = e.offsetWidth;
                var hb = e.offsetHeight;
                (e.offsetParent) の間 {
                    l += e.offsetLeft + (e.currentStyle ? intval(e.currentStyle.borderLeftWidth) : 0);
                    t += e.offsetTop + (e.currentStyle ? intval(e.currentStyle.borderTopWidth) : 0);
                    e = e.offsetParent;
                }
                l += e.offsetLeft + (e.currentStyle ? intval(e.currentStyle.borderLeftWidth) : 0);
                t += e.offsetTop + (e.currentStyle ? intval(e.currentStyle.borderTopWidth) : 0);
                戻る {
                    x: 1,
                    y: t,
                    w: w、
                    時間: 時間、
                    wb: wb、
                    ハーフ：ハーフ
                };
            } // 情報を取得する function getScroll(){
                var t、l、w、h;
                document.documentElement と document.documentElement.scrollTop の場合 {
                    t = document.documentElement.scrollTop;
                    ドキュメント要素の左端をスクロールします。
                    スクロール幅
                    ドキュメントのスクロールの高さを設定します。
                }
                それ以外
                    ドキュメント本体の場合
                        ドキュメントの先頭部分をスクロールします。
                        ドキュメントの左端をスクロールします。
                        ドキュメントのスクロール幅を指定します。
                        ドキュメントのスクロールの高さを設定します。
                    }
                戻る {
                    t: t、
                    l: l、
                    w: w、
                    時間:時間
                };
            } //?ポイント(アンカー)?スムーズジャンプ?   
            関数scroller(el,duration){
                if (typeof el != 'object') {
                    el = document.getElementById(el);
                }
                もし (!el)
                    戻る;
                var z = これ;
                z.el = el;
                zp = getPos(el);
                zs = getScroll();
                z.clear = 関数(){
                    ウィンドウのクリア間隔(z.timer);
                    z.timer = null
                };
                zt = (新しい日付).getTime();
                z.step = 関数(){
                    var t = (新しい日付).getTime();
                    var p = (t - zt) / 期間;
                    （t >= 期間 + zt）の場合{
                        z.clear();
                        window.setTimeout(関数(){
                            z.スクロール(zpy,zpx)
                        }, 13);
                    }
                    それ以外 {
                        st = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (zpy - zst) + zst;
                        sl = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (zpx - zsl) + zsl;
                        z.scroll(st, sl);
                    }
                };
                z.scroll = 関数(t, l){
                    ウィンドウをスクロールします(l, t)
                };
                z.timer = window.setInterval(関数(){
                    ステップ数
                }, 13);
            }
        </スクリプト>
    </head>
    <本文>
        <div class="test">
            <a name="header_1" id="header_1"></a>
            <strong onclick="javascript:scroller('header_4', 800);">header_1 --> header_4</strong>
            <p>
            </p>
        </div>
        <div class="test">
            <a name="header_2" id="header_2"></a>
            <strong onclick="javascript:scroller('header_5', 800);">header_2 --> header_5</strong>
            <p>
            </p>
        </div>
        <div class="test">
            <a name="header_3" id="header_3"></a>
            <strong onclick="javascript:scroller('header_6', 800);">header_3 --> header_6</strong>
            <p>
            </p>
        </div>
        <div class="test">
            <a name="header_4" id="header_4"></a>
            <strong onclick="javascript:scroller('header_7', 800);">header_4 --> header_7</strong>
            <p>
            </p>
        </div>
        <div class="test">
            <a name="header_5" id="header_5"></a>
            <strong onclick="javascript:scroller('header_3', 800);">header_5 --> header_3</strong>
            <p>
            </p>
        </div>
        <div class="test">
            <a name="header_6" id="header_6"></a>
            <strong onclick="javascript:scroller('header_2', 800);">header_6 --> header_2</strong>
            <p>
            </p>
        </div>
        <div class="test">
            <a name="header_7" id="header_7"></a>
            <strong onclick="javascript:scroller('header_1', 800);">header_7 --> header_1</strong>
            <p>
            </p>
        </div>
    </本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: JavaScript シングルスレッドと非同期の詳細

>>: MySQL 5.5.27 winx64 のインストールと設定方法のグラフィックチュートリアル