css - 跳转到同一页面上的部分不起作用

Question

我很难跳转到同一页面上的某个部分 ahref 和 aname。我将按钮链接到页面下方的特定 div。当单击链接使其转到右侧 div 时，它确实会跳几行到它们各自的 div 中，而我希望它显示 div 的顶部。如果能帮助解决这个问题，我将不胜感激。

这是 html(href 标签在 navrow 类中):

<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

将命名 anchor 放置在您要移动到的区域上方而不是在其中会很有帮助。

我建议:

<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 标记以包含似乎缺失的结束 anchor 标记 ( </a> )。

最后一个想法是不要将 anchor 命名为与类相同的名称。并不是说这是特别的问题。但我倾向于为类使用类名，而不是为页面上的其他元素使用类名。