Targeting ID of an element isn't working.

Question

I'm having problem on the page I'm working with, I'm trying to set a permalink with an id so that if the page is fully loaded, it would show the page and it focuses on the element with the ID as its top of the page. But the scenario here, after the focus goes to the ID, eventually the view goes to the top of the page.

The page view should go to the heading that says "Care facilities with rest home and hospital level care"

http://metlifecare.staging.wpengine.com/living-at-metlifecare/assisted-living#care-facility

What could a quick fix. Not familiar with the issue. Any help would be greatly appreciated.

Answer 1

Like Evan Knowles said you need to add names to your anchors for the browser to be able to browse there.

Replace

<a id="trigger-sa" href="http://metlifecare.staging.wpengine.com/living-at- metlifecare/metlifecare.staging.wpengine.com/living-at-metlifecare/assisted-living#care-facility"></a>

with

<a id="trigger-sa" name="care-facility" href="http://metlifecare.staging.wpengine.com/living-at-metlifecare/metlifecare.staging.wpengine.com/living-at-metlifecare/assisted-living#care-facility"></a>

I see what you are referring to as the 'jump to the top'. It looks like this piece of code make the entire page block and then jumps to the top

<script type="text/javascript">
    html2canvas(document.body, {
        onrendered: function(canvas) {
            document.body.appendChild(canvas);
        }
    });
</script>    

Removing that code stop the jump and makes the #care-facility work correctly.

I have never worked with html2canvas, so I can't comment on what it is doing.