css - 使用带视差滚动的 anchor

Question

我正在尝试为具有视差滚动功能的网站创建垂直元素符号导航器。不幸的是，导航的重定向不起作用。

这是 jsfiddle:http://jsfiddle.net/r1yq7pLd/

滚动似乎没问题，但 anchor 不起作用。有人知道原因吗？ HTML:

<div id="wrapper">


        <section id="main_bg" data-type="background" data-speed="10">
            <a href="#top"></a>

        </section>

        <section class="content" data-type="text">

            <article><a href="#pag2"></a>I am absolute positioned</article>
        </section>

        <nav>
            <ul>
                <li><a href="#top">&bull;</a></li>
                <li><a href="#pag2">&bull;</a></li>
                <li><a href="#">&bull;</a></li>
                <li><a href="#">&bull;</a></li>
                <li><a href="#">&bull;</a></li>
                <li><a href="#">&bull;</a></li>

            </ul>
        </nav>
    </div>

CSS: body { 背景颜色:#1599D0；

#wrapper{
    width:100%;
    height: 1000px;
}

nav{
    top: 35%;
    position: fixed;
    right: 50px;
    width: 30px;
    border-left: double rgba(255,255,255,0.4);
    border-right: double rgba(255,255,255,0.4);
}


ul li a{
    color: rgba(255,255,255,0.4);
    font-size: 30px;
    text-decoration: none;
    text-indent: -9999px;
    padding: 0 10px;
}

#main_bg{
  background: url("../img/wall_index1.jpg") repeat fixed;
  /* Set rules to fill background */
  min-height: 100%;
  background-size:cover;

  /* Set up proportionate scaling */
  width: 100%;

  /* Set up positioning */
  position: relative;

}

.content{
    position:relative;
  width: 100%;
  background-color:#000;
  padding: 200px;
  font-size: 50px;
  color: #FFF;
  height: 500px;
}

注意:由于没有reset.css，这里的菜单有点乱。是否可以将它插入到 jsfiddle 中？

Answer 1

这与您使用的 CSS 无关，这是因为您没有正确设置 anchor 。 Pag2和 Top应该设置为 id s，导航使用href链接回他们 - 你们都设置为 href .此外，您不再需要实际设置单独的 anchor ，您只需使用 id 即可。在您现有的元素中。最后，从 id 中排除散列本身，这只是告诉链接寻找 anchor 而不是新页面。

您的 html 应该是:

<div id="wrapper">

        <section id="main_bg" data-type="background" data-speed="10"></section>

        <section class="content" data-type="text">
             <article id="pag2">I am absolute positioned</article>
        </section>

        <nav>
            <ul>
                <li><a href="#">Top</a></li>
                <li><a href="#pag2">Page 2</a></li>
                <li><a href="">...other links</a></li>
                <li><a href="">...other links</a></li>
                <li><a href="">...other links</a></li>    
            </ul>
        </nav>
</div>

不需要单独的顶部 anchor ，“#”将始终转到当前页面的顶部。

顺便说一下，我不确定为什么你的列表中有元素符号 - 默认情况下，无序列表 ( <ul> ) 会为你添加元素符号，所以我用更有意义的内容替换了你的链接文本.