点击按钮后页面'幻灯片'

Question

我的网站使用整页主div，当用户向下滚动显示下面的内容时，该div会消失。我有一个动画向下滚动按钮，这样用户就会知道如果向下滚动它们会有更多内容（它们需要在衰落前滚动大约150px）

我希望按钮在点击时将页面“向下推/滑”该距离，类似于用户向下滚动的情况。理想情况下，这种推/滑会很容易，因此它不仅仅是对内容的一种猛烈冲击。

HTML

<header class="hide-header">
  <div id="scl-btn-wrap" class="bounce">
    <a id="scl-btn" class="fa fa-chevron-down fa-lg" href="#"></a>
  </div>
</header>

当用户到达底部工作时，我有一个scoll-up按钮，但无法弄清楚如何基本上对设定差异做相反的事情

HTML

头

<script> 
function scrolltop(){ $("html, body").animate({scrollTop:0}, 800,"swing"); } 
window.onload = function() { window.scrollTo(0, 0);}
</script> 

footer.php

<a href="javascript:void(0);" onclick="scrolltop();"></a>