ссылка на страницу с одним веб-сайтом ссылка на начало страницы не входит в начало страницы

У меня есть простой веб-сайт с одной страницей, который имеет некоторую навигацию с именованными ссылками. Одна из ссылок указывает на div с идентификатором «home», который является правильным под тегом body. Цель этой ссылки - вернуться в начало страницы, однако, когда выбранная страница будет возвращена немного ниже верхней части страницы (например, вам нужно немного прокрутить вверх).ссылка на страницу с одним веб-сайтом ссылка на начало страницы не входит в начало страницы

Подтверждено на Chrome, Firefox и Safari. Разве это невозможно обойтись без javascript? FYI: Я попробовал это с помощью 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 op, и он появится. В противном случае вы должны использовать js.

источник

2012-10-06 14:18:19 Geuis

Я ценю это, попробовал, но это не исправить. – JohnGalt

ссылка на страницу с одним веб-сайтом ссылка на начало страницы не входит в начало страницы

ответ

Смежные вопросы