1

名前付きリンクを使用したナビゲーションを備えた単純な単一ページの Web サイトがあります。リンクの 1 つは、body タグのすぐ下にある「home」という ID を持つ div を指しています。このリンクの目的はページの上部に戻ることですが、選択すると、ページはページの上部より少し下に戻ります (たとえば、少し上にスクロールする必要があります)。

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;
}
4

2 に答える 2

1

#home の高さを明示的に設定する代わりに、overflow: auto を使用してみてください。

#home{
    overflow: auto;
}
于 2012-10-06T14:28:08.100 に答える
0

body タグの直後に名前付きアンカーを使用する

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

#top にリダイレクトすると、ポップアップが表示されます。それ以外の場合は、js を使用する必要があります。

于 2012-10-06T14:18:19.463 に答える