jumping to section on the same page not working - css

Question

I am having difficulty jumping to a section on the same page using
ahref and aname. I am making the buttons the link to a specific div further down the page. While clicking on the link makes it go to the right div, it does jumps a few lines into their respective divs, while I would like it to show the top of the div. I would appreciate any help solving this problem.
Here is the html (the href tags are in class navrow):
<div class="header">
<br>
<br>
<h1>Learn More About Charles Guthrite</h1>
<p></p>
<div class="navrow">
<table>
<tr>
<td><button>About Me</button></td>
<td><button>Work Samples</button></td>
<td><button>Resume</button></td>
<td><button>Blog</button></td>
<td><button>Contact</button></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>
Here is the CSS in case you need it:
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

It can be helpful to place the named anchors above the area you want to move to rather than within it.
I would propose:
<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>
And possibly correct your HTML markup to include the closing anchor tags (</a>) which appear to be missing.
One final thought is to not name anchors the same as a class. Not that this is specifically a problem. But I tend to use class names for classes and not for other elements on a page.

Answer 2

The result you are getting is partly a matter of not enough web page content below the targets - - the browser simply can't scroll any lower (which would bring your content to the top of the browser) because the page content is finished.
Also, your targets are inside of the sections you want to target. Target the div's, not anchors within the div's.
Another issue is that you haven't closed your <a> elements for the targets.
Also, you don't really need buttons to accomplish what you want.
Here's some updated code that (just for demonstration) adds a bottom margin to your samples div so that the bottom targets have more room to move up the page. This is just for demonstration, it's not considered a best practice.:
.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>About Me</td>
<td>Work Samples</td>
<td>Resume</td>
<td>Blog</td>
<td>Contact</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>

Answer 3

You can provide a little css to your anchor targets to compensate for fixed position headers:
a.anchor{
display:block;
position: relative;
top: -150px;
visibility: hidden;
}
your example with slight tweak