セクションIDは視差スクロールウェブサイトでは機能しません

Question

私は視差スクロールウェブサイトを持っています。このウェブサイトには、コンテンツを見るためにスクロールダウンする必要があることをユーザーに示す矢印が付いています。

私は、ユーザーが矢印をクリックして関連セクションにスクロールできるようにしたいと考えています。私が理解している限り、セクションにIDを追加し、矢印のhrefタグでそれを参照するだけです。私はいくつかの理由のために働いていない次のことを、持っているだけで、URLの最後にIDを追加しますが、下にスクロールしません：

HTML：

<!-- Button --> 
<a class="green-arrow" href="#backupsection"> 
    <img src="img/green-arrow.svg"> 
</a> 

<!-- Backup 2 --> 
<section id="backupsection" class="background"> 
    <div class="content-wrapper-left"> 
    <p class="backup-text-title">Methods</p> 
    <p class="backup-text">No surprises here then: tape as a primary backup method remains at an all-time low of 3%. This is the first year it hasn’t fallen – possibly indicative of how stubborn some legacy systems (often populated with static compliance data) can be.</p> 
    </div> 
</section> 

Answer 1

あなたがにクラスを与えますボタンを使用するにはクリックして、それらにID「フック」

 <a class="button" href="#about">About</a> 
     <a class="button" href="#service">Services</a> 
     <a class="button" href="faqs.html">Galleries</a> 
     <a class="button" href="#contact">Contact</a> 

を与え、残りの部分ではなく、単にページのセクションにジャンプする、それを滑らかなアニメーションを作るために、jQueryを使って行われます。ここでペンがある：

http://codepen.io/damianocel/pen/wKKbjO

Answer 2

私は多分あなたはより多くのそれの上に行うことができます簡単なデモを行いました。私は高さの目的でこれらの2つの要素間1000pxであるdiv要素を作っ同時に

$(".green-arrow").click(function() { 
    $("html, body").animate({ 
     scrollTop: $("#backupsection").offset().top 
    }, 2000); 
}) 

、これはより多くの明らかな効果を作ることができます。