JavaScript：是否可以跳转到表格内的锚点？

Question

JavaScript: Is it possible to jump to an anchor point inside a table? JavaScript：是否可以跳转到表格内的锚点？

I have a long table (generated by a java servlet) and wish to jump to a point inside this table.我有一个长表（由 java servlet 生成）并希望跳转到该表内的某个点。 The static html version with two variants is inserted below.下面插入了带有两个变体的静态 html 版本。

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.用于交换变体的方法，请参阅html文本中的详细信息。

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>

Answer 1

From MDN: 来自 MDN：

The HTMLElement.offsetTop read-only property returns the distance of the current element relative to the top of the offsetParent node. HTMLElement.offsetTop 只读属性返回当前元素相对于 offsetParent 节点顶部的距离。

So that means you are reading the offset from the anchor to the TD which I am guessing is a very small number.所以这意味着您正在读取从锚点到 TD 的偏移量，我猜这是一个非常小的数字。

Use getBoundingClientRect()使用getBoundingClientRect()

JavaScript：是否可以跳转到表格内的锚点？

问题描述

1 个解决方案

解决方案1
0 2018-02-21 14:12:22

JavaScript：是否可以跳转到表格内的锚点？

问题描述

1 个解决方案

解决方案1 0 2018-02-21 14:12:22

解决方案1
0 2018-02-21 14:12:22