The use of anchor points in HTML_PowerNode Java Academy

The use of anchor points in HTML_PowerNode Java Academy

Now let's summarize several situations of controlling anchor points:

1. On the same page

<a name="add"></a><!-- Define anchor point-->
<a href="#add">Jump to add</a>

2. In different pages, the anchor is located in a.html, and the link from another page jumps to this anchor

<a href="a.html#add">Jump to a.add</a>

3. Clicking a link triggers a js event and jumps to the anchor point. There are two ways to handle this:

The first one:

<a href="#add" onclick="add()">Trigger the add function and jump to the add anchor point</a>

Second type:

<div id="divNode"><!-- contents --></div><!-- Assume a node that needs to be jumped to-->
<a href="#" onclick="document.getElemetnById('divNode').scrollIntoView(true);return false;">Realize the anchor effect through scrollIntoView</a>  

There are several ways to set anchor positioning in HTML, using ID positioning, name positioning, and JS positioning. These methods are not necessarily the most complete, so you can only refer to the following

1. Use id positioning:

<a href="#1F" name="1F">Anchor Point 1</a> 
<div name="1F"> 
<p> 
11111111111 
</br> 
11111111111 
</br>11111111111 
</br>11111111111 
</br>11111111111 
</br> 
</p> 
</div>

This positioning can be targeted at any label.

2. Use name positioning:

<a href="#5F">Anchor Point 5</a> 
</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> 

The name attribute can only be used to locate the a tag, but it cannot be used to locate other tags such as div.

3. Use js positioning

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

Examples:

js anchor point smooth positioning

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <head>
        <style type="text/css" mce_bogus="1">
            div.test {
                width: 400px;
                margin: 5px auto;
                border: 1px solid #ccc;
            }
             
            div.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;
            }
             
            div.test p {
                height: 400px;
                background: #f1f1f1;
                margin: 0;
            }
        </style>
        <script type="text/javascript">
             
            function intval(v){
                v = parseInt(v);
                return isNaN(v) ? 0 : v;
            } // Get element information 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
                };
            } // Get a piece of information 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
                };
            } //?Point (Anchor)?Smooth jump?   
            function scroller(el, duration){
                if (typeof el != 'object') {
                    el = document.getElementById(el);
                }
                if (!el)
                    return;
                var z = this;
                z.el = el;
                zp = getPos(el);
                zs = getScroll();
                z.clear = function(){
                    window.clearInterval(z.timer);
                    z.timer = null
                };
                zt = (new Date).getTime();
                z.step = function(){
                    var t = (new Date).getTime();
                    var p = (t - zt) / duration;
                    if (t >= duration + zt) {
                        z.clear();
                        window.setTimeout(function(){
                            z.scroll(zpy, zpx)
                        }, 13);
                    }
                    else {
                        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 = function(t, l){
                    window.scrollTo(l, t)
                };
                z.timer = window.setInterval(function(){
                    z.step();
                }, 13);
            }
        </script>
    </head>
    <body>
        <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>
    </body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<:  Nginx 502 Bad Gateway Error Causes and Solutions

>>:  MySQL 5.5.27 winx64 installation and configuration method graphic tutorial

Blog    

Recommend

Example of implementing dashed border with html2canvas

html2canvas is a library that generates canvas fr...

How to configure VMware multi-node environment

This tutorial uses CentOS 7 64-bit. Allocate 2GB ...

Batch replace part of the data of a field in Mysql (recommended)

Batch replace part of the data of a field in MYSQ...

Nginx local directory mapping implementation code example

Sometimes you need to access some static resource...

Example operation MySQL short link

How to set up a MySQL short link 1. Check the mys...

React implements import and export of Excel files

Table of contents Presentation Layer Business Lay...

JavaScript pre-analysis, object details

Table of contents 1. Pre-analysis 1. Variable pre...

Teach you about react routing in five minutes

Table of contents What is Routing Basic use of pu...

jQuery implements form validation

Use jQuery to implement form validation, for your...

The most comprehensive collection of front-end interview questions

HTML+CSS 1. Understanding and knowledge of WEB st...

Is mysql a relational database?

MySQL is a relational database management system....

Example of configuring multiple SSL certificates for a single Nginx IP address

By default, Nginx supports only one SSL certifica...

Analyzing the node event loop and message queue

Table of contents What is async? Why do we need a...