I have a simple single page web site that has some navigation with named links. One of the links points to a div with an id of “home” that is the right under the body tag. The goal of this link is to return to the top of the page, however, when selected the page is returned slightly below the top of the page (e.g. requires you to scroll slightly up).
Confirmed it on Chrome, Firefox, and Safari. Is this not possible to do without javascript? FYI: I tried it using jsfiddle and didn’t have the problem.
Here is the html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<link href='http://fonts.googleapis.com/css?family=Cantata+One' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="home">
<div id="nav">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#experiments">Experiments</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<h1>
<span id="i">i</span>
<span id="n">n</span>
<span id="c">c</span>
</h1>
<h2>
<span id="tagline">"angel investor, coder want-to-be, nikola tesla groupie."</span>
</h2>
</div>
<div id="experiments">
<span id="ex">ex</span>
<span id="amples">amples</span>
</div>
</body>
And here is the CSS:
/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
REMOVED THIS PART OF THE CSS FOR BREVITY
/* Beginning of Custom CSS */
body {
background-image: url("straws.png");
}
@Font-face {
font-family: 'curly';
src: url('fonts/HoneyScript-Light.ttf') format('truetype');
}
/* Main Title & Tag Line */
#home{
height: 1000px;
}
h1 {
z-index: -100;
text-align: center;
margin-top: 10px;
text-align: center;
}
#i {
font-family: 'curly', serif;
color: orange;
font-size: 20em;
text-shadow: 3px 3px 7px #999;
}
#n {
font-family: courier;
color: black;
font-size: 10em;
text-shadow: 3px 3px 7px #999, -1px -1px -1px white, 1px 1px 0 #BBB;
}
#c {
font-family: 'curly', serif;
color: gray;
font-size: 5em;
text-shadow: 2px 2px 7px #999, -1px -1px -1px white, 1px 1px 0 #BBB;
}
h2 {
position: relative;
top: -50px;
text-align: center;
}
#tagline {
font-family: 'Cantata One' serif;
color: #666;
font-size: 2em;
}
/* Navigation */
#nav {
position: fixed;
margin-left: 45%;
font-family: 'arial';
font-size: 2em;
margin-top: 40px;
}
#nav li {
display: inline;
margin-right: 10px;
}
#nav li a {
color: grey;
text-decoration: none;
border: 2px solid black;
.webkit-box-shadow: 5px 5px 5px #777777;
box-shadow: 5px 5px 5px #777777;
padding: 5px;
}
#nav li a:hover {
color: black;
}
#experiments{
height: 1000px;
}
#ex {
font-family: 'curly', serif;
color: orange;
font-size: 20em;
text-shadow: 3px 3px 7px #999;
}
#amples {
font-family: courier;
color: black;
font-size: 10em;
text-shadow: 3px 3px 7px #999, -1px -1px -1px white, 1px 1px 0 #BBB;
}
Instead of setting the height of #home explicitly, try using overflow: auto