Javascript HTML5中jQuery ScrollTo的问题

我的scrollTo功能有一个奇怪的问题，我已经把所有的东西都扔到了它上面，但似乎我不能让它运行。我在GitHub上使用的是来自Arial Flesler的jquery.scrollTo.js版本1.4.13

以下是我的设置，其中包括一个导航栏实例、我试图滚动到的部分以及我的功能：

<header>
    <nav id="navbar" class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">SiteName</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#" data-loc="home">Home</a></li>
                    <li><a href="#about"data-loc="about" >About</a></li>
                    <li><a href="#team" data-loc="team">Team</a></li>
                    <li><a href="#contact" data-loc="contact">Contact</a></li>                        
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</header>

下面是我希望它滚动到的部分之一：

<div class="container">

    <section id="about" class="scroll-panel">

        <div class="jumbotron jumbotron-midnight text-centered">
            <h1>This test is amazing!</h1>
            <p>
                This site came out well and was put together quickly!
            </p>
        </div>

        <div class="jumbotron jumbotron-midnight text-centered">
            <div class="row">

                <div class="showcase-item col-md-4">
                    <div class="showcase-item-box">
                        <img src="icons/png/Book.png" />
                        <p>Get your new books!</p>
                    </div>
                </div>

                <div class="showcase-item col-md-6">
                    <div class="showcase-item-box">
                        <img src="icons/png/Gift-Box.png" />
                        <p>Get your complimentary item!</p>
                    </div>
                </div>

                <div class="showcase-item col-md-2">
                    <div class="showcase-item-box">
                        <img src="icons/png/Map.png" />
                        <p>Movin!</p>
                    </div>
                </div>

            </div>                
            </div>
        </div>
    </section>

下面是我第三次写的一个函数，它可以滚动：

<script src="Scripts/jquery.scrollTo.js"></script>
<script>
    (function ($) {
        $('bs-example-navbar-collapse-1').on('click', 'li a', function () {
            var $clickedAnchor = $(this),
                $panelToScrollTo = $('#' + $clickedAnchor.data('loc'));
            $panelToScrollTo.scrollTo();
        });
    }(jQuery));
</script>

---

我对可能出现的问题感到失望。它会转到各个部分，但不会滚动。我没有扳手打这个了。还有人有线索吗？。。。。我已经尝试了在这里找到的不同版本的我的。。。没有骰子。

我最终得到了它。。。这是我用过的。我不得不走很长的路，挖掘一些基本的JavaScript，但它做到了：

首先，我这样设置我的HREF，并使用onmousedown调用：

然后按如下方式设置我的分区：

<section id="home" class="scroll-panel1">
     <div class="jumbotron jumbotron-midnight text-centered">
         <p>Just some content to fill the div.</p>
     </div>
</section>

最后，我输出了一个函数，并链接了一个工作的jQuery.min.js文件以帮助滚动，但是，该函数完成了大部分工作：

var scrollY = 0;
    var distance = 40;
    var speed = 24;

    function autoScrollTo(el) {
        var currentY = window.pageYOffset;
        var targetY = document.getElementById(el).offsetTop;
        var bodyHeight = document.body.offsetHeight;
        var yPos = currentY + window.innerHeight;
        var animator = setTimeout('autoScrollTo(\'' + el + '\')', speed);

        if (yPos >= bodyHeight) {
            clearTimeout(animator);
        }
        else {
            if (currentY < targetY - distance) {
                scrollY = currentY + distance;
                window.scroll(0, scrollY);
            }
            else {
                clearTimeout(animator);
            }
        }
    }


    // This sets up the reset, so that the animation, knows when to stop, once it hits the section area.
    function resetScroll(el) {
        var currentY = window.pageXOffset;
        var targetY = document.getElementById(el).offsetTop;
        var animator = setTimeout('resetScroller(\'' + el + '\')', speed);

        if (currentY > targetY) {
            scrollY = currentY - distance;
            window.scroll(0, scrollY);
        }
        else {
            clearTimeout(animator);
        }
    }
</script>

var scrollY = 0;
    var distance = 40;
    var speed = 24;

    function autoScrollTo(el) {
        var currentY = window.pageYOffset;
        var targetY = document.getElementById(el).offsetTop;
        var bodyHeight = document.body.offsetHeight;
        var yPos = currentY + window.innerHeight;
        var animator = setTimeout('autoScrollTo(\'' + el + '\')', speed);

        if (yPos >= bodyHeight) {
            clearTimeout(animator);
        }
        else {
            if (currentY < targetY - distance) {
                scrollY = currentY + distance;
                window.scroll(0, scrollY);
            }
            else {
                clearTimeout(animator);
            }
        }
    }


    // This sets up the reset, so that the animation, knows when to stop, once it hits the section area.
    function resetScroll(el) {
        var currentY = window.pageXOffset;
        var targetY = document.getElementById(el).offsetTop;
        var animator = setTimeout('resetScroller(\'' + el + '\')', speed);

        if (currentY > targetY) {
            scrollY = currentY - distance;
            window.scroll(0, scrollY);
        }
        else {
            clearTimeout(animator);
        }
    }
</script>