How to make the page load to an anchor tag?

问题

how could I, or is it possible, to make it so when the webpage loads, the first thing it shows you is the part of the page, where the anchor tag is you want the person to first see.

Is it possible?

Thanks for all help in advance.

回答1:

Something simple like this would do it

<body onload=' location.href="#myanchor" '>
<a id='myanchor' href='#'>anchor text</a>

回答2:

Use javascript.

Solution 1

When the document loads, go to the "hash" or anchor that you want

<script type="text/javascript">
function load()
{
window.location.hash="mylocation"; 
}
</script>

Solution 2

In the header:

<script type="text/javascript" language="javascript">
    function moveWindow (){window.location.hash="mylocation";}
</script>

On the body tag:

<body onload="moveWindow()">

And your anchor:

<a name="mylocation"></a>

回答3:

Here's a 2018 update that's a bit more dynamic.

If you'd like to pull the URL, pull the anchor from the URL, and move the page to that anchor, you can run this javascript on page load.

if (window.location.href.indexOf('#') == 0) {
    let hash = window.location.href.split('#')[1];
    let hashTop = document.querySelector(`#${hash}`).offsetTop;
    window.scrollTop = hashTop;
}

There's also this way which is a bit more concise.

if (location.hash) {
    let target = location.hash;
    window.scrollTop = document.querySelector(target).offsetTop;
}

If you're not compiling ES6 with babel, just change the let keyword to var. This also works for WordPress, which will add a slash in the URL before the anchor.

来源：https://stackoverflow.com/questions/16368129/how-to-make-the-page-load-to-an-anchor-tag

标签