Can you scroll to an anchor in html of an element that is relatively positioned?

I have this 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>
      开发者_StackOverflow中文版  <li name="packages">
            <h1>Packages</h1>
            <p>text</p>
        </li>
    </div>

This HTML is relatively position on the page. When I try to direct the page to '#services' it does absolutely nothing. It just loads the page again. I am assuming the problem is that they are relatively positioned. Is there any way to make this work?

---

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

I don't think relative positioning is the problem. The fragment identifier (hash) takes you to an element with the id value matching the hash, or the a name= element with the name equal to the tag (note that that's an anchor, an a tag, not just any tag). Your li tag doesn't match either of those criteria. (In fact, I don't believe that li elements are allowed to have a name attribute.)

If this structure is unique on the page, try changing

<li name="services">

to

<li id="services">

Live example

For years it was a well-kept secret (I certainly didn't know about it for years), but it was covered in the HTML 4.10 spec.

---

You need to use an anchor <a> tag:

<a name="services"></a>

---

You should create an a tag with a name element - you can't just attach name to any tag

<li><a name="packages"></a>
    <h1>Packages</h1>
    <p>text</p>
</li>