Question

我有一个简单的单页网站，其中包含一些带有命名链接的导航。其中一个链接指向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;
}

Answer 1

不要明确设置#home的高度，而是尝试使用overflow：auto

#home{
    overflow: auto;
}

Answer 2

在开始正文标记

之后立即使用命名锚点

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

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

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

2 个答案: