Идентификатор раздела, не работающий на веб-сайте прокрутки параллакса

Question

У меня есть сайт прокрутки parallax, на котором есть стрелки, чтобы указать пользователю, что им нужно прокрутить вниз, чтобы просмотреть содержимое.

Я хочу, чтобы пользователь мог нажать на стрелки, которые затем перейдут к соответствующему разделу. По моему мнению, все, что мне нужно сделать, это добавить идентификатор в раздел, а затем ссылаться на тег href стрелки. У меня есть следующие, которые по каким-то причинам не работает, а только добавляет идентификатор к концу URL, но не прокручивается вниз:

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

Даешь класс к кнопки вы щелкнет, а затем дать им Ид «крюк»

 <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

Я сделал простой демонстрационный пример, может быть, вы можете сделать больше над ним.

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

в то же время я сделал Div элемент, высота которого 1000px между этими двумя элементами на цели, это может сделать эффект более очевидно.