跳到同一页面上的部分无法正常工作

Question

我很难跳到同一页面上的某个部分 ahref和aname。我正在使按钮成为页面下方特定div的链接。点击链接使它向右移动div，它确实跳了几行到他们各自的div中，而我希望它显示div的顶部。我很感激任何帮助解决这个问题。

这是html（href标签在类导航中）：

<div class="header">
<br>
<br>
<h1>Learn More About Charles Guthrite</h1>
<p></p>



<div class="navrow">
<table>
    <tr>
        <td><a href="#bout"><button>About Me</button></a></td>
        <td><a href="#work"><button>Work Samples</button></a></td>
        <td><a href="#resume"><button>Resume</button></a></td>
        <td><a href="#blog"><button>Blog</button></a></td>
        <td><a href="#contact"><button>Contact</button></a></td>
    </tr>
</table>
</div>
</div>
<div id="AboutPictures">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQguaNQJU2J-h8TmbEVIpqDdp0blsw2i7dESDKllu_XnhdQ8Lv71_eOu-g">
<h3>Charles Guthrite is a Northwestern University senior majoring in Journalism. He is addicted to sports, YouTube, and quality journalism. Charles's favorite publications include the Wall Street Journal, Daily Northwestern and New York Times. You can often find him in the gym, coding, or watching NFL or NBA games. <h3>

</div>
<div class="samples">
<table>
    <th>Pokemon</th>
    <tr>
        <td>
                    <p>Squirtle is an amphibion Pokemon. He can shoot water and hide in his shell</p>
                    <img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png">
        </td>
        <td>
                    <p>Hello Charzard</p>
                <img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//006.png">
        </td>

        <td>
                    <p>Hello Charzard</p>
            <img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//001.png">
        </td>
    </tr>
    <tr>
        <td>
                    <p>Hello Charzard</p>
            <img src = "http://vignette3.wikia.nocookie.net/fantendo/images/a/a5/Pikachu_digital_art_pokemon_by_dark_omni-d5wotdb.png/revision/latest?cb=20141113035440">
        </td>
        <td>
                    <p>Hello Charzard</p>
                <img src = "https://upload.wikimedia.org/wikipedia/en/5/5f/Pok%C3%A9mon_Lugia_art.png">
            </td>
        <td>
                    <p>Hello Charzard</p>
                <img src = "http://vignette1.wikia.nocookie.net/pokemon/images/f/ff/Togepi.png/revision/latest?cb=20100731212849">
        </td>
    </tr>
</table>

<div class="resume"><a NAME="resume"></a>Resume Page</div>
<a NAME="blog">
<div class="blog">Blog Page</div>
<a NAME="contact">
<div class="contacts">Contact Page</div>
</div>
</body>
</html>

以下是您需要的CSS：

html, body{
    font-family: 'Lato', sans-serif;
    width: 100%;
    padding: 0;
    margin: 0;
}

p{
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif; 
}
h1{
    font-family: Arial, Helvetica, sans-serif;
    color: white;
}
.header{
    position: fixed;
    z-index: 20;
    width: 100%;
    background-color: black;
    text-align: center;
}
.navrow{
    background-color: white;
    height: 50px;
    width: 100%;
}
.navrow table td{
    padding-left: 150px;
}
button{
    padding: 10px;
    font-family: Helvetica, Arial, sans-serif;  
}

.aboutpage h1{
    color:red;
}


.samples {
    float: left;
    height: 70%;
    width: 100%;
}
.resume {
    float: left;
    width: 100%;
    height: 900%;
    background-color: rgb(0,300,200);
}
.blog {
    float: left;
    width: 100%;
    height: 80%;
    background-color: rgb(0,300,150);
}
.contacts {
    float: left;
    width: 100px;
    height: 100px;
    background-color: yellow;
}
#AboutPictures {
    margin-top: 170px;
    float: right;
    background-color: rgb(0,200,255);
}

#AboutPictures h3{
    margin-left: 20px;
}
img[src*="tumblr"]{
    height:360px;
    width:40%;
    float: right;
    top: 10px;
    padding:0 0 0 0;

}

.biopage {
    position:relative;
}
.samples table{
    position: relative;
    width: 100%;
}
.samples td{
    text-align: center;
    width: 30%;
    height:300px;
    position:relative;
    table-layout: fixed;
    background-color: rgb(0,300,300);

}
.samples td img{
    width: 290px;
    height:290px;
    z-index: 0;
}
.samples td:hover img{
    opacity: .5;
}
.samples p{
    margin: 0;
    position:absolute;
    left: 0;
    top: 50%;
    right:0;
    z-index: 10;
    color: #fff;
    font-size: 20px;
    text-align: center;
}
.samples td:hover p{
    visibility: visible;
}
.samples td p{
    visibility: hidden;
}
.container{
    background color: white;
    width: 25%;
    float: right;
}
.container img{
    width: 100%;
}

Answer 1

将命名锚点放置在上面的区域可能会有所帮助，而不是在其中。

我建议：

<a NAME="resumelnk"></a>
<div class="resume">Resume Page</div>

<a NAME="bloglnk"></a>
<div class="blog">Blog Page</div>

<a NAME="contactlnk"></a>
<div class="contacts">Contact Page</div>

并且可能更正您的HTML标记以包含似乎缺失的结束锚标记（</a>）。

最后一个想法是不要将锚点命名为类。这不是特别一个问题。但我倾向于使用类名而不是页面上的其他元素。

Answer 2

您可以为锚点目标提供一点css来补偿固定位置标题：

a.anchor{
    display:block;
    position: relative;
    top: -150px;
    visibility: hidden;
}

your example with slight tweak

Answer 3

您获得的结果部分是由于目标下方的网页内容不够 - 浏览器根本无法向下滚动（这会将您的内容带到浏览器的顶部），因为页面内容是结束。

此外，您的目标位于要定位的部分内。瞄准div，而不是div中的锚点。

另一个问题是您尚未关闭目标的<a>元素。

此外，您并不需要按钮来完成您想要的任务。

这里有一些更新的代码（仅用于演示）为样本div添加底部边距，以便底部目标有更多空间向上移动页面。这只是为了演示，它不被认为是最佳实践。：

.button { border:1px solid grey; border-radius:1px; background-color:#e0e0e0; text-decoration:none; padding:2px; color:#000; }
.button:active {border:1px solid black; }
.samples {margin-bottom:300px;}

<div class="header">
<br>
<br>
<h1>Learn More About Charles Guthrite</h1>
<p></p>



<div class="navrow">
<table>
    <tr>
        <td><a href="#bout" class="button">About Me</a></td>
        <td><a href="#work" class="button">Work Samples</a></td>
        <td><a href="#resume" class="button">Resume</a></td>
        <td><a href="#blog" class="button">Blog</a></td>
        <td><a href="#contact" class="button">Contact</a></td>
    </tr>
</table>
</div>
</div>
<div id="AboutPictures">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQguaNQJU2J-h8TmbEVIpqDdp0blsw2i7dESDKllu_XnhdQ8Lv71_eOu-g">
<h3>Charles Guthrite is a Northwestern University senior majoring in Journalism. He is addicted to sports, YouTube, and quality journalism. Charles's favorite publications include the Wall Street Journal, Daily Northwestern and New York Times. You can often find him in the gym, coding, or watching NFL or NBA games. <h3>

</div>
<div class="samples">
<table>
    <th>Pokemon</th>
    <tr>
        <td>
                    <p>Squirtle is an amphibion Pokemon. He can shoot water and hide in his shell</p>
                    <img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png">
        </td>
        <td>
                    <p>Hello Charzard</p>
                <img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//006.png">
        </td>

        <td>
                    <p>Hello Charzard</p>
            <img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//001.png">
        </td>
    </tr>
    <tr>
        <td>
                    <p>Hello Charzard</p>
            <img src = "http://vignette3.wikia.nocookie.net/fantendo/images/a/a5/Pikachu_digital_art_pokemon_by_dark_omni-d5wotdb.png/revision/latest?cb=20141113035440">
        </td>
        <td>
                    <p>Hello Charzard</p>
                <img src = "https://upload.wikimedia.org/wikipedia/en/5/5f/Pok%C3%A9mon_Lugia_art.png">
            </td>
        <td>
                    <p>Hello Charzard</p>
                <img src = "http://vignette1.wikia.nocookie.net/pokemon/images/f/ff/Togepi.png/revision/latest?cb=20100731212849">
        </td>
    </tr>
</table>

<div class="resume" id="resume">Resume Page</div>
<div class="blog" id="blog">Blog Page</div>
<div class="contacts" id="contact">Contact Page</div>
  
</div>