Question

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

我有一个长表（由java servlet生成）并希望跳转到此表中的某个点。下面插入了带有两个变体的静态html版本。

在一个不包含表格的变体中，跳转工作正常。在原始文本放置在表中的替代变体中，包括目标锚点，跳转到锚点不起作用。

有关用于交换变体的方法，请参阅html文本中的详细信息。

感谢您的任何建议。

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:

HTMLElement.offsetTop只读属性返回距离相对于offsetParent节点顶部的当前元素。

这意味着你正在读取从锚点到TD的偏移量，我猜这是一个非常小的数字。

使用getBoundingClientRect()

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

1 个答案: