Heim  >  Artikel  >  Web-Frontend  >  Drei Implementierungsmethoden für HTML-Ankerpunkte

Drei Implementierungsmethoden für HTML-Ankerpunkte

PHPz
PHPzOriginal
2017-04-03 16:57:564836Durchsuche

Anker werden häufig auf Webseiten verwendet, insbesondere auf längeren Seiten. Die Verwendung von Ankern erhöht die Benutzererfahrung. Jetzt werden auf der chinesischen PHP-Website drei Implementierungsmethoden für HTML-Anker eingeführt 1. Auf derselben Seite


5b62bd7d775b2adbc1bb9c77cffa9ea45db79b134e9f6b82c0b36e0489ee08ed5e497456ed357f6481025fc3fb9a708eZum Hinzufügen springen5db79b134e9f6b82c0b36e0489ee08ed

2. Auf verschiedenen Seiten wird der Ankerpunkt in a.html positioniert, von einer anderen Seite aus springt der Link zu diesem Anker Punkt59baaeaf69a9f8e28ce84a8d935b5ebaSpringt zu a.add5db79b134e9f6b82c0b36e0489ee08ed
3 Klicken Sie auf den Link, um das js-Ereignis auszulösen und gleichzeitig zum Anker zu springen , gibt es zwei Möglichkeiten, damit umzugehen:
Die erste:
de348a754106d073e6fc33e6b97d532e löst die Add-Funktion aus und springt zum Add-Ankercef9106d9c166b063ab104a70d94f8aacb4e25d677c71b611af30b24ac580ce894b3e26ee717c64999d7867364b1b4a389a47a5696f8e2fa503c728633fa7cbf
3a9badff1b4e8850784e83015b3e70c5Ankereffekt durch scrollIntoView5db79b134e9f6b82c0b36e0489ee08ed 🎜>


Es gibt mehrere Möglichkeiten, die Ankerpositionierung in HTML festzulegen, die Namenspositionierung zu verwenden und die JS-Positionierung zu verwenden Folgendes.

1. Verwenden Sie die ID, um zu lokalisieren:


Eine solche Positionierung kann für jedes Tag erfolgen.
<a href="#1F" name="1F">锚点1</a> 
<p name="1F"> 
<p> 
11111111111 
</br> 
11111111111 
</br>11111111111 
</br>11111111111 
</br>11111111111 
</br> 
</p> 
</p>

2. Namenspositionierung verwenden:

Durch die Verwendung des Namensattributs kann nur das Tag a positioniert werden, andere Tags wie z. B. p können jedoch nicht positioniert werden.

<a href="#5F">锚点5</a> 
</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> 
<a name="5F">1111111</href>

3. Verwenden Sie die js-Positionierung

<li class="" onclick="javascript:document.getElementById(&#39;here&#39;).scrollIntoView()"></li>

实例:

js 锚点平滑定位

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <head>
        <style type="text/css" mce_bogus="1">
            p.test {
                width: 400px;
                margin: 5px auto;
                border: 1px solid #ccc;
            }
             
            p.test strong {
                font-size: 16px;
                background: #fff;
                border-bottom: 1px solid #aaa;
                margin: 0;
                display: block;
                padding: 5px 0;
                text-decoration: underline;
                color: #059B9A;
                cursor: pointer;
            }
             
            p.test p {
                height: 400px;
                background: #f1f1f1;
                margin: 0;
            }
        </style>
        <script type="text/javascript">
             
            function intval(v){
                v = parseInt(v);
                return 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;
                while (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);
                return {
                    x: l,
                    y: t,
                    w: w,
                    h: h,
                    wb: wb,
                    hb: hb
                };
            } // ?取??条信息   
            function getScroll(){
                var t, l, w, h;
                if (document.documentElement && document.documentElement.scrollTop) {
                    t = document.documentElement.scrollTop;
                    l = document.documentElement.scrollLeft;
                    w = document.documentElement.scrollWidth;
                    h = document.documentElement.scrollHeight;
                }
                else
                    if (document.body) {
                        t = document.body.scrollTop;
                        l = document.body.scrollLeft;
                        w = document.body.scrollWidth;
                        h = document.body.scrollHeight;
                    }
                return {
                    t: t,
                    l: l,
                    w: w,
                    h: h
                };
            } // ?点(Anchor)?平滑跳?   
            function scroller(el, duration){
                if (typeof el != &#39;object&#39;) {
                    el = document.getElementById(el);
                }
                if (!el)
                    return;
                var z = this;
                z.el = el;
                z.p = getPos(el);
                z.s = getScroll();
                z.clear = function(){
                    window.clearInterval(z.timer);
                    z.timer = null
                };
                z.t = (new Date).getTime();
                z.step = function(){
                    var t = (new Date).getTime();
                    var p = (t - z.t) / duration;
                    if (t >= duration + z.t) {
                        z.clear();
                        window.setTimeout(function(){
                            z.scroll(z.p.y, z.p.x)
                        }, 13);
                    }
                    else {
                        st = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (z.p.y - z.s.t) + z.s.t;
                        sl = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (z.p.x - z.s.l) + z.s.l;
                        z.scroll(st, sl);
                    }
                };
                z.scroll = function(t, l){
                    window.scrollTo(l, t)
                };
                z.timer = window.setInterval(function(){
                    z.step();
                }, 13);
            }
        </script>
    </head>
    <body>
        <p class="test">
            <a name="header_1" id="header_1"></a>
            <strong onclick="javascript:scroller(&#39;header_4&#39;, 800);">header_1 --> header_4</strong>
            <p>
            </p>
        </p>
        <p class="test">
            <a name="header_2" id="header_2"></a>
            <strong onclick="javascript:scroller(&#39;header_5&#39;, 800);">header_2 --> header_5</strong>
            <p>
            </p>
        </p>
        <p class="test">
            <a name="header_3" id="header_3"></a>
            <strong onclick="javascript:scroller(&#39;header_6&#39;, 800);">header_3 --> header_6</strong>
            <p>
            </p>
        </p>
        <p class="test">
            <a name="header_4" id="header_4"></a>
            <strong onclick="javascript:scroller(&#39;header_7&#39;, 800);">header_4 --> header_7</strong>
            <p>
            </p>
        </p>
        <p class="test">
            <a name="header_5" id="header_5"></a>
            <strong onclick="javascript:scroller(&#39;header_3&#39;, 800);">header_5 --> header_3</strong>
            <p>
            </p>
        </p>
        <p class="test">
            <a name="header_6" id="header_6"></a>
            <strong onclick="javascript:scroller(&#39;header_2&#39;, 800);">header_6 --> header_2</strong>
            <p>
            </p>
        </p>
        <p class="test">
            <a name="header_7" id="header_7"></a>
            <strong onclick="javascript:scroller(&#39;header_1&#39;, 800);">header_7 --> header_1</strong>
            <p>
            </p>
        </p>
    </body>
</html>

Das obige ist der detaillierte Inhalt vonDrei Implementierungsmethoden für HTML-Ankerpunkte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn