带箭头的视差向下滚动

Question

我使用视差向下滚动页面。

但是现在我需要创建一个图标/箭头，当用户点击向下滚动到下一页时，这些图标/箭头可以看到，就像这个例子一样。

http://cyclemon.com/index.html

由于

我的菜单工作正常，

<ul id="nav">
 <li><a href="#intro">HOME</a></li>
 </ul>

我添加一个箭头，

 <a href="#intro"><img src="imgs/icone_down.png" /></a>

该链接有效但不添加像视差的滚动效果......

到处都是

现在我有，

    <script>
     $(document).ready(function (){
          $("#click").click(function (){
            //$(this).animate(function(){
$('html,body').animate({
scrollTop: window.scrollY + window.innerHeight
}, 1000);
            //});
        });
    });
</script>

<a href="#second"><img src="imgs/icone_down.png" /></a>

好的，现在我发现我们是否到了底部，但我怎么能隐藏箭头？

$(window).scroll(function() {   
if($(window).scrollTop() + $(window).height() == $(document).height()) {
   alert("bottom!");
}
});

Answer 1

他们做了什么：在DOM树中添加一个元素：

.arrow {
    position: fixed;
    left: 50%;
    bottom: 15px;
    margin-left: -15px; // or whatever 50% the width of the arrow is
}

然后每次单击时使用JavaScript将页面滚动X量（例如，window.innerHeight +“px”）。我会使用jQuery使动画变得漂亮和流畅：

$('html,body').animate({
    scrollTop: window.scrollY + window.innerHeight
}, 1000);