Jquery 单击菜单链接即可从一个div移动到另一个div

我想在我的网站上制作一个动画效果，当我们点击一个菜单链接（比如说，关于部分）时，它将以视差样式为那个div制作动画

所以伙计们，如果你们知道任何jquery插件可以在这方面帮助我，那么请让我知道，如果你们也给我演示一个这样的例子会更好

请参阅代码以获取帮助：

.Home部分{
高度：500px；
背景：深蓝；
}
.关于部分{
高度：300px；
背景：深粉色；
}

你好
拜伊

希望您想要这个。谢谢

//仅处理以“#”开头的@href链接
$（文档）。在（'click'，'a[href^=“#”]”上，函数（e）{
//目标元素id
var id=$（this.attr（'href'）；
//目标元素
变量$id=$（id）；
如果（$id.length==0）{
返回；
}
//防止标准哈希导航（避免在IE中闪烁）
e、 预防默认值（）；
//相对于文档的顶部位置
var pos=$（id）.offset（）.top-10；
//动画顶部滚动
$（'body，html'）.animate（{scrollTop:pos}）；
});
.Home部分{
高度：500px；
背景：深蓝；
}
.关于部分{
高度：300px；
背景：深粉色；
}

你好
拜伊
要获得更像视差的效果，您可以添加
背景附件：固定

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


注意：我使用@sagar kodte JS代码，这对动画效果很好。
请试试这个

.Home部分{
高度：500px；
背景：深蓝；
}
.关于部分{
高度：300px；
背景：深粉色；
}
一个{光标：指针}

html代码

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


$（文档）.ready（函数（）{
$（“a”）。单击（函数（）{
var ourclass=$（this.attr（'class'）；
$（'html，body'）。设置动画({
scrollTop:$（“#”+ourclass）.offset（）.top-10
}, 2000); 
});
});

.Home部分{
高度：500px；
背景：深蓝；
}
.关于部分{
高度：300px；
背景：深粉色；
}

你好
再见
试试这个插件谢谢！工作得很有魅力。当滚动到我编辑的那个div时，我可以在顶部加一点填充吗。。您想在滚动的div上方留出一些间隙吗？