Якоря не работают на одной странице сайта

Мой новый проект - это веб-сайт на одну страницу. Честно говоря, это моя презентационная страница, так сказать. here Якоря не работают на одной странице сайта

Теперь, моя проблема. Как я уже сказал, сайт должен быть на одной странице. Поэтому я проектирую 4 раздела, сначала в середине, второй справа, третий внизу и последний слева. Все они абсолютно позиционированы. А также фиксированный nav.

Код следующий: 1.html:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Andrei Terecoasa</title> 

    <meta name="viewport" content="width=device-width, user-scalable=false;"> 

    <link href='http://fonts.googleapis.com/css?family=Raleway:400,200,500,300' rel='stylesheet' type='text/css'> 


    <link rel="stylesheet" href="reset.css"> 
    <link rel="stylesheet" href="style.css"> 

</head> 
<body> 
    <div id="first"> 
     <a name="home"></a> 
     <h1 id="hi">Hi!</h1> 
     <h2 id="who">I am <span id="name">Andrei <span id="who2">Terecoasa</span></span></h2> 
     <p id="what">and i am a front-end developer! <span id="d">:D</span></p> 
    </div> 
    <div id="blog"> 
     <a name="blog"></a> 
     <article> 
      <h1 class="title">Salut</h1> 
      <p class="desc">primul articol</p> 
     </article> 
    </div> 
    <nav> 
     <ul> 
      <li><a href="#home">home</a></li> 
      <li><a href="#blog">blog</a></li> 
      <li><a href="#">contact</a></li> 
      <li><a href="#">about</a></li> 
     </ul> 
    </nav> 
</body> 
</html>

2.CSS:

/* 


*/ 

html, 
body { 
    min-height: 100%; 
    height:100%; 
} 

body { 
    font-family: 'Raleway', sans-serif; 
    overflow: hidden; 

} 

#first { 
    background: #2ecc71; 
    text-align: center; 
    color:#ecf0f1; 
    min-height:100%; 
    padding: 70px; 
    width:100%; 
    position: absolute; 
    top:0%; 
    left:0%; 
} 

#hi { 
    font-size:6em; 
    line-height: 100px; 
    margin:20px; 
} 

#who { 
    margin:20px; 
    font-size: 2.5em; 
} 

#name { 
    color:#2c3e50; 
} 

#what { 
    font-size: 1.3em; 
    margin:30px; 
} 

nav { 
    position: fixed; 
    bottom:0px; 
    background: #ecf0f1; 
    width:100%; 
    text-align: center; 
} 

nav ul li { 
    display: inline-block; 
} 

nav ul li a { 
    font-size:1.2em; 
    display:block; 
    padding:10px; 
    text-decoration: none; 
    color:#8e44ad; 
} 

#blog { 
    position: absolute; 
    left:100%; 
    top:0; 
    width:100%; 
    background: #3498db; 
     min-height:100%; 
    padding: 70px; 
    width:100%; 
} 







/** 

* Media queries for responsive design. 

* 

* These follow after primary styles so they will successfully override. 

*/ 



@media all and (orientation:portrait) { 


    html, body {width:100%;max-width: 100%;margin:0;padding:0;} 


} 



@media all and (orientation:landscape) { 


} 



@media screen and (max-width:900px) { 

} 



@media screen and (max-width: 500px) { 



} 



@media screen and (max-device-width: 480px) { 





    /* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you: j.mp/textsizeadjust */ 

    /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */ 

}

Проблема здесь состоит в том, что навигация с помощью якорей не работает .. Является ли это правильный подход или вы предпочтете лучший вариант?

Кроме того, скрипка включена fiddle

источник

2013-09-25 Andrei Terecoasa

Попробуйте использовать

href="linktoyourpage.com#home" 
href="linktoyourpage.com#blog"

Надеется, что это помогает

источник

2013-09-25 15:42:14 Sudharsun

Nope :(Но спасибо за попытку! –

проверить, если страница входа достаточно и якорь размещены с относительно большое пространство. – Sudharsun

Если вы используете этот якорный тег для отображения соответствующего содержимого при нажатии, добавьте длинный контент и тест – Sudharsun

Якоря не работают на одной странице сайта

ответ

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