Jquery 使用固定的侧栏菜单垂直单击各个部分

我有一个单页的网站，分为几个部分。我有两个箭头，一个向上，一个向下，点击应该滚动到下一个或上一个部分。箭头是固定的元素

任何关于它为什么不起作用的建议都将不胜感激， 提前谢谢

JQUERY

<script>
jQuery.fn.extend({
scrollTo : function(speed, easing) {
return this.each(function() {
  var targetOffset = $(this).offset().top;
  $('html,body').animate({scrollTop: targetOffset}, speed, easing);
});
}
});

$('.next-section').click(function(e){
e.preventDefault();
var $this = $(this),
    $next = $this.parent().next();

$next.scrollTo(400, 'linear');
});

$('.prev-section').click(function(e){
e.preventDefault();
var $this = $(this),
    $prev = $this.parent().prev();

$prev.scrollTo(400, 'linear');
});
</script>

jQuery.fn.extend({
滚动至：功能（速度、缓解）{
返回此值。每个（函数（）{
var targetOffset=$（this）.offset（）.top；
$（'html，body'）。动画（{scrollTop:targetOffset}，速度，放松）；
});
}
});
$（'.next section'）。单击（函数（e）{
e、 预防默认值（）；
变量$this=$（this），
$next=$this.parent（）.next（）；
$next.scrollTo（400，‘线性’）；
});
$（'.prev section'）。单击（函数（e）{
e、 预防默认值（）；
变量$this=$（this），
$prev=$this.parent（）.prev（）；
$prev.scrollTo（400，‘线性’）；
});

HTML

我的部分是这样划分的：

<div class="section" id="section2">
Content...
</div>

内容。。。

问题到底出在哪里。也许你可以建立一个网站来展示这个问题？是的，你可以通过直接给你的网站链接或制作一个提琴来展示这个问题。我已经在这里上传了这个网站：

<div class="section" id="section2">
Content...
</div>