Sektion ID arbeitet nicht auf Parallax Scrolling Website

Question

Ich habe eine Parallax Scrolling-Website, die Pfeile auf den Benutzer anzuzeigen, dass sie nach unten scrollen müssen, um den Inhalt anzuzeigen.

Ich möchte, dass der Benutzer in der Lage ist, auf die Pfeile zu klicken, die dann zum relevanten Abschnitt scrollen. Nach meinem Verständnis muss ich nur eine ID zum Abschnitt hinzufügen und dann auf das href-Tag des Pfeils verweisen. Ich habe die folgende, die aus irgendeinem Grund nicht funktioniert, und fügt nur die ID an das Ende der URL, aber nicht nach unten scrollen:

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

Sie geben eine Klasse der Schaltflächen klicken Sie und dann geben sie die ID „Haken“

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

und der Rest ist mit jQuery getan, es eine glatte Animation zu machen, anstatt nur auf die Seite Abschnitt springen. Hier ist der Stift:

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

Answer 2

ich eine einfache Demo gemacht vielleicht können Sie mehr über es tun.

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

zur gleichen Zeit ich ein div Elementhöhe dessen gemacht ist 1000px zwischen diesen beiden Elementen absichtlich, kann dies die Wirkung mehr machen offensichtlich.