Moving from one div to another on click of a menu link

Question

I want to make an animation effect on my website where, when we click on a menu link (say, about-section), it will animate to that div in a parallax style.

So guys if you know any jquery plugin that can help me in this context, then please let me know, and it would be better if you demonstrate me a example of that as well.

See the code for help:

.Home-section {
  height: 500px;
  background: deepskyblue;
}
.About-section {
  height: 300px;
  background: deeppink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<a href="#">Home</a>
<a href="#">About</a>

<div class="Home-section">
  <h1> Hello </h1>
</div>

<div class="About-section">
  <h1>Bye</h1>
</div>

So, According to the code i want to animate to About-section on click on the link stating About

Answer 1

Hope you want this. Thanks

// handle links with @href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
    // target element id
    var id = $(this).attr('href');

    // target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }

    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();

    // top position relative to the document
    var pos = $(id).offset().top - 10;

    // animated top scrolling
    $('body, html').animate({scrollTop: pos});
});

.Home-section {
  height:500px;
  background: deepskyblue;
  }

.About-section {
  height:300px;
  background:deeppink;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#home">Home</a>
<a href="#about">About</a>

<div class="Home-section" id="home"><h1> Hello </h1>
  </div>

<div class="About-section" id="about"><h1>Bye</h1>
  </div>