-2

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>
scheurer
  • 55
  • 1
  • 3
  • Can you provide us with a JsFiddle? Then it is easier to help you. – Mario Murrent Feb 21 '18 at 13:53
  • You need to not have duplicated ids. You have two `anchor1` – epascarello Feb 21 '18 at 13:53
  • In an initital comment I gave details, which then disappeared. Apology. Key point: to apply one or the other of the two variants, simply disable the end of the initial comment of the variant you want to disable: replace '-->' by '- ->' So for each version l have actually only one anchor 'Anchor1'. Initially variant v00 obtains. I dont have JsFiddle, but in Eclipse the two variants are quited clear. – scheurer Feb 21 '18 at 14:04
  • jsfiddle is a website.... – epascarello Feb 21 '18 at 14:05
  • https://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element – epascarello Feb 21 '18 at 14:09
  • Re: using JsFiddle. Thanks, but I have tried to sign in, and the sign in page did not accept all my attempts. – scheurer Feb 21 '18 at 14:23

1 Answers1

0

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()

epascarello
  • 204,599
  • 20
  • 195
  • 236
  • Grateful for the point on HTMLElement.offsetTop. Will apply suggestion re getBoundingClientRect(). But the following too works with variant v00 and not with variant v01. – scheurer Feb 21 '18 at 14:53