단일 페이지 웹 사이트 앵커 이름 맨 위로 링크가 보이지 않습니다.

이름이 지정된 링크가 포함 된 간단한 단일 페이지 웹 사이트가 있습니다. 링크 중 하나는 body 태그 바로 아래에있는 "집"이라는 ID를 가진 div를 가리 킵니다. 이 링크의 목표는 페이지 상단으로 돌아 오는 것입니다. 그러나 선택하면 페이지가 페이지 상단 약간 아래로 돌아갑니다 (예 : 약간 위로 스크롤해야 함).단일 페이지 웹 사이트 앵커 이름 맨 위로 링크가 보이지 않습니다.

Chrome, Firefox 및 Safari에서 확인했습니다. 이것은 자바 스크립트없이 할 수 있습니까? 참고 : 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 태그

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

후 지정된 앵커를 사용하여 그런 다음 #t로 리디렉션합니다. op가 나오면 팝업됩니다. 그렇지 않으면 js를 사용해야합니다.

출처

2012-10-06 14:18:19 Geuis

를 나는 그것을 시도하지만 그것을 해결되지 않았다, 그것을 주셔서 감사합니다. – JohnGalt

단일 페이지 웹 사이트 앵커 이름 맨 위로 링크가 보이지 않습니다.

답변

관련 문제