【发布时间】：2016-03-12 02:57:24
【问题描述】：
我在使用跳转到同一页面上的某个部分时遇到困难
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%;
}
【问题讨论】：
-
<a name=在 html5 上不受支持，请改用id。