Issues With jQuery ScrollTo in HTML5

Question

I have an odd issue with my scrollTo function, and have thrown everything at it, but it seems I can't get it going. I'm using a jquery.scrollTo.js version 1.4.13 from Arial Flesler on GitHub.

Here's my setup with one instance of the navbar, a section I'm trying to scroll to, and my function:

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

Here's one of the section's I want it to scroll to:

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

And here's my 3rd write up for a Function to make it scroll:

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

I'm about bummed out on what could be the problem. It's going to the sections, but it IS NOT SCROLLING. I'm out of wrenches to hit this with. Anyone else got a clue?.... I've tried my of the different versions found on here... no dice.

Answer 1

I eventually got it... here's what I used. I had to take the long route, and dig up some fundamental JavaScript, but it did the trick:

First, I set up my hrefs like so, and used the onmousedown call:

<ul class="nav navbar-nav navbar-right">
   <li><a href="#" onclick="return false" onmousedown="autoScrollTo('home');"rel="nofollow">Home</a></li>
   <li><a href="#" onclick="return false" onmousedown="autoScrollTo('about');" rel="nofollow">About</a></li>
   <li><a href="#" onclick="return false" onmousedown="autoScrollTo('team');" rel="nofollow">Team</a></li>
   <li><a href="#" onclick="return false" onmousedown="autoScrollTo('contact');" rel="nofollow">Contact</a></li>
</ul>

Then setup my sections like so:

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

Finally, I pumped out a function, and linked a working jQuery.min.js file to assist with scrolling, however, the function does the bulk of the work:

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>