Question

我正在尝试为具有视差滚动的网站创建垂直子弹导航器。不幸的是导航的重定向不起作用。

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

滚动似乎没问题，但锚不起作用。谁知道原因？ 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：身体{ 背景色：＃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无关，这是因为您没有正确设置锚点。 Pag2和Top应设置为id s，导航使用href链接回来 - 您都设置为href。此外，您不再需要实际设置单独的锚点，只需在现有元素中使用id即可。最后，从id本身中排除哈希值，这只是告诉链接寻找锚点而不是新页面。

你的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>

不需要单独的顶部锚点，“＃”将始终位于当前页面的顶部。

顺便说一下，我不确定为什么你的列表中有子弹 - 默认情况下，无序列表（<ul>）会为你填充子弹，所以我用你的东西替换你的链接文本更有意义。

使用具有视差滚动的锚点

1 个答案: