Javascript jquery菜单动画的问题

我希望你很好

下面是一个关于如何清理代码的问题。目前，它是有效的。。。几乎这个想法是，你可以点击右边的粘滞滑块的任何元素，它会把你带到文档中的那个地方——蓝色的小球会跟着你。你也可以滚动，蓝色小球也会跟着滚动

问题是：

当我点击我所在位置下方的标题时，滚动会起作用，但球不会平稳跟随。我怎样才能使它平稳地下降，而不在每个航向上猛拉

当我点击我所在位置上方的标题时，球只会返回到我所在位置下方的标题

对于底部标题“第八个”，动画根本不起作用。它也不适用于滚动-如果我滚动到底部，菜单停留在标题“第七”

如果你能帮忙，我将非常感激！我的项目两天后就要到期了，从周末开始，我每晚都要到凌晨4点

HTML:

<aside>
    <div id="floating">
    <h2 id='nav-title'><a href='#fb-root'>The Guide</a></h2>
    <div id='nav-container'>
   <div id='line-container'>
      <div id='line'>

      </div>
   </div>
   <div id='nav-list'>
       <ul>
          <li ><a href="#1" id='1-cat'>First</a></li>
          <li ><a href="#2" id='2-cat'>Second</a></li>
          <li ><a href="#3" id='3-cat'>Third</a></li>
          <li ><a href="#4" id='4-cat'>Fourth</a></li>
          <li ><a href="#5" id='5-cat'>Fifth</a></li>
          <li ><a href="#6" id='6-cat'>Sixth</a></li>
          <li ><a href="#7" id='7-cat'>Seventh</a></li>
          <li ><a href="#8" id='8-cat'>Eighth</a></li>
       </ul>
       </div>
       <br style="clear:both; font-size:1px;" />
       </div>
    </div>
</aside>

<h1>The Guide</h1>
// stuff here
<h2 id="1">First</h2>
// stuff here
<h2 id="2">Second</h2>
// stuff here
<h2 id="3">Third</h2>
// stuff here
<h2 id="4">Fourth</h2>
// stuff here
<h2 id="5">Fifth</h2>
// stuff here
<h2 id="6">Sixth</h2>
// stuff here
<h2 id="7">Seventh</h2>
// stuff here
<h2 id="8">Eighth</h2>
// stuff here

奖励：我希望能够在菜单上上下拖动球，这将使文档滚动到我拖动球的标题。Mega points给任何能给我一些如何做到这一点的建议的人

$(document).ready(function() {
    $("#1-cat").attr("class", "clicked");

    $("#nav-title").click(function() {
        $("#line").animate({
            "top": "0px"
        }, "fast");
        if ($("#1-cat").attr("class") != "clicked") {
            $('#nav-list a').attr("class", "");
            $("#1-cat").attr("class", "clicked");
        }
    });


    $('#nav-list a').click(function() {
        var ltop = 40 * parseFloat($(this).attr('id')) - 40;
        var elementClicked = $(this).attr("href");
        var destination = $(elementClicked).offset().top;
        $('html,body').animate({
            scrollTop: destination + 20
        }, 600, function() {
            $("#line").animate({
                "top": ltop + "px"
            }, "fast");
            if ($(this).attr("class") != "clicked") {
                $('#nav-list a').attr("class", "");
                $(this).attr("class", "clicked");
            }
        });
    });

    $('#content h2').waypoint(function(event) {
        var $el = $(this);
        $('#nav-list a').attr('class', '');
        $('#nav-list a#' + $el.attr('id') + '-cat').attr('class', 'clicked');
        var ltop = 40 * parseFloat($('#nav-list a#' + $el.attr('id') + '-cat').attr('id')) - 40;
        $("#line").animate({
            "top": ltop + "px"
        }, "fast");
    }, {
        offset: '5px'
    });
});