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

Answer 1

To get more like a parallax effect, you can add background-attachment: fixed;

.About-section {
  height: 300px;
  background: url('http://lorempicsum.com/futurama/627/200/3') no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

Like this

Note : I use @sagar kodte JS code which works good for the animation.

Answer 2

please try this

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

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

html code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
  $("a").click(function() {
  var ourclass = $(this).attr('class');
 $('html, body').animate({
 scrollTop: $("#"+ourclass).offset().top-10
 }, 2000); 
 });
 });
</script>
 <a class="home">Home</a>
 <a class="about">About</a>
<div class="Home-section" id="home"><h1> Hello </h1></div>
<div class="About-section" id="about"><h1>Bye</h1></div>

and also js fiddlde here

Answer 3

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>

Answer 4

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

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

Try this.