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

Question

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

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

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

<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, который я использую на странице

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

А затем делит страницу на "id=home", "id=services" и т. Д.