动画滚动到视差站点内的 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”等向下划分页面