單頁網站主頁名稱鏈接到頁面頂部不返回頁首

我有一個簡單的單頁網站，有一些與命名鏈接導航。其中一個鏈接指向一個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

單頁網站主頁名稱鏈接到頁面頂部不返回頁首

回答

相關問題