单页网站主页名称链接到页面顶部不返回页首

我有一个简单的单页网站，有一些与命名链接导航。其中一个链接指向一个ID为“home”的div，它位于body标签下方。此链接的目标是返回到页面的顶部，但是，选中时页面会返回到页面顶部的稍下方（例如，需要稍微向上滚动）。单页网站主页名称链接到页面顶部不返回页首

在Chrome，Firefox和Safari上确认它。这是不可能做到没有JavaScript？仅供参考：我用jsfiddle试过，没有问题。

下面是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>

这里是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; 
}

来源

2012-10-06 JohnGalt

而是明确设定#home的高度，请尝试使用溢出：汽车

#home{ 
    overflow: auto; 
}

来源

2012-10-06 14:28:08

我很感激，但那并没有解决它。 – JohnGalt

该更改奏效。 – JohnGalt

使用命名锚口主体标签

<body> <a name="top"></a>

之后然后重定向到#t它会弹出。否则，你必须使用js。

来源

2012-10-06 14:18:19 Geuis

我欣赏它，尝试过，但没有解决它。 – JohnGalt

单页网站主页名称链接到页面顶部不返回页首

回答

相关问题