javascript - 您可以滚动到相对定位的元素的 html 中的 anchor 吗？

Question

我有这个 HTML:

        <li name="services">
            <h1>Services</h1>
            <p>text</p>
        </li>
        <li name="about">
            <h1>About</h1>
            <p>text</p>
        </li>
        <li name="portfolio">
            <h1>Portfolio</h1>
            <p>text</p>
        </li>
        <li name="team">
            <h1>Team</h1>
            <p>text</p>
        </li>
        <li name="process">
            <h1>Process</h1>
            <p>text</p>
        </li>
        <li name="packages">
            <h1>Packages</h1>
            <p>text</p>
        </li>
    </div>

此 HTML 在页面上的相对位置。当我尝试将页面定向到“#services”时，它什么也没做。它只是再次加载页面。我假设问题是它们相对定位。有什么方法可以使它起作用吗？

Answer 1

When I try to direct the page to '#services' it does absolutely nothing. It just loads the page again

我不认为相对定位是问题所在。片段标识符(散列)将您带到 id 值与散列匹配的元素，或 a name= 元素与 name 相等到标签(请注意，这是一个 anchor ，一个 a 标签，而不仅仅是任何标签)。您的 li 标记不符合这些条件中的任何一个。 (事实上​​，我不认为 li elements 可以有 name 属性。)

如果此结构在页面上是唯一的，请尝试更改

<li name="services">

到

<li id="services">

Live example

多年来，这是一个保守的 secret (我当然年都不知道)，但它是 covered in the HTML 4.10 spec .