Анимация прокрутки для div внутри сайта параллакса

Question

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

Прокрутка параллакса работает, это первая часть кода в моем .js-файле, который можно просмотреть в нижней части страницы.

вот мои ссылки Див

<div id="main-nav"> <!-- top locked scroll bar --> 
     <p> 
     <a class="click" href="#home">Your Links</a> | 
     <a href="#me">More Links</a> | 
     <a href="#projects">Another Link</a> | 
     <a href="#hire">Really</a> 
     <!-- <button onclick="changeColor()">Yin/Yang</button> --> 
     </p> 
    </div> 

пример того, где он переходит к на странице (но я хочу, чтобы оживить в)

section class="box slide slide-1"> 
    <div class="container"> 
     <div id="home"></div> 
     <h1>Main Title</h1> 
    </div> 
    </section> 

здесь все JavaScript I» м, используя на странице

(function(){ 

var parallax = document.querySelectorAll(".slide"), 
    speed = 0.5; 

window.onscroll = function(){ 
[].slice.call(parallax).forEach(function(p,i){ 

    var windowYOffset = window.pageYOffset, 
     theBackgrounPos = "0 " + (windowYOffset * speed) + "px"; 

    p.style.backgroundPosition = theBackgrounPos; 

}); 
}; 
})(); 

/************ CODE USED TO MAKE THE ANIMATION SCROLL TO THAT IS NOT WORKING*//// 
$(document).ready(function(){ 
     $(".click").click(function(){ 
       $('html, body').animate({ 
        scrollTop: $("#home").offset().top 
       }, 2000); 
     }); 
}); 

Любая помощь будет принята с благодарностью, даже если мой лучший маршрут начнется.

Answer 1

У меня только что работает над сайтом, над которым я работаю.

JavaScript:

$(document).ready(function() { 
    $("a[href^='#']").click(function(event) { 
     var target = $($(this).attr("href")); 
     event.preventDefault(); 
     $("html, body").animate({ 
      scrollTop: target.offset().top 
     }, 500); 
    });  
}); 

HTML:

<nav id="nav-menu"> 
    <a href="#home"><p>home</p></a> 
    <a href="#services"><p>services</p></a> 
    <a href="#work"><p>work</p></a> 
    <a href="#about"><p>about</p></a> 
    <a href="#contact"><p>contact</p></a> 
</nav> 

А потом DIVS вниз страницы с "ид = дом", "ID = услуги" и т.д.