简体   繁体   中英

JavaScript: Is it possible to jump to an anchor point inside a table?

JavaScript: Is it possible to jump to an anchor point inside a table?

I have a long table (generated by a java servlet) and wish to jump to a point inside this table. The static html version with two variants is inserted below.

In one variant, which includes no table, the jumps work fine. In an alternative variant with the original text placed in a table, including the target anchor, jumping to the anchor does not work.

For the method used to exchange the variants, see the details in the html text.

Thanks for any suggestions.

Thierry Scheurer


<html> 
    <head> 
        <title>
            File jump.html 
        </title> 
    </head> 

    <body onload="skipToCur(anchor1)" bgcolor="ffffff"> 

        <a id="Page top">
            ******
        </a>
        <br/>
        jump.html
        <br/>
        <button onclick="skipToCur(anchor1)">
            Go to Anchor1
        </button> 

        <p/>

        <!-- v00<< EFFECTIVE -->
        @@@@
        <br/>
        @@@@
        <br/>
        @@@@
        <br/> 
        @@@@
        <br/>
        @@@@
        <br/> 

        @@@@
        <br/>
        @@@@
        <br/>
        @@@@
        <br/> 
        @@@@
        <br/>
        @@@@
        <br/> 

        @@@@
        <br/>
        @@@@
        <br/>
        @@@@
        <br/> 
        @@@@
        <br/>
        @@@@
        <br/> 

        <p/>
            <button onclick="skipToCur(Page_top)">
                To page top
            </button> 
        <br/>
            <a id="anchor1">
                Anchor1
            </a>
        <!-- v00>> -->

        <!-- v01<< INEFFECTIVE - ->
        <table border="1">
            <tr>
                <td>
                    @@@@
                </td>
            </tr>
            <tr>
                <td>
                    @@@@
                </td>
            </tr>
            <tr>
                <td>
                    @@@@
                </td>
            </tr>
            <tr>
                <td>
                    @@@@
                </td>
            </tr>
            <tr>
                <td>
                    @@@@
                </td>
            </tr>
            <tr>
                <td>
                    @@@@
                </td>
            </tr>
            <tr>
                <td>
                    @@@@
                </td>
            </tr>
            <tr>
                <td>
                    @@@@
                </td>
            </tr>
            <tr>
                <td>
                    @@@@
                </td>
            </tr>
            <tr>
                <td>
                    @@@@
                </td>
            </tr>
            <tr>
                <td>
                    @@@@
                </td>
            </tr>
            <tr>
                <td>
                    @@@@
                </td>
            </tr>
            <tr>
                <td>
                    @@@@
                </td>
            </tr>
            <tr>
                <td>
                    @@@@
                </td>
            </tr>
            <tr>
                <td>
                    @@@@
                </td>
            </tr>


            <tr>
                <td>
                    <button onclick="skipToCur(Page_top)">
                        To page top
                    </button>
                </td>
            </tr>
            <tr>
                <td>
                    <a id="anchor1">
                        Anchor1
                    </a>
                </td>
            </tr>
        </table>
        <!-- v01>> -->

        <p/>

        <script>
            var anchor1 = "anchor1"; 
            var Page_top = "Page top"; 

            function skipToCur(a)
            {
                var top = document.getElementById(a).offsetTop;
                window.scrollTo(0, top);
            }
        </script>
    </body>
</html>

From MDN:

The HTMLElement.offsetTop read-only property returns the distance of the current element relative to the top of the offsetParent node.

So that means you are reading the offset from the anchor to the TD which I am guessing is a very small number.

Use getBoundingClientRect()

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM