javascript - HTML5 中 jQuery ScrollTo 的问题

Question

我的 scrollTo 函数有一个奇怪的问题，我已经把所有的东西都扔给了它，但似乎我无法让它继续运行。我正在使用来自 GitHub 上 Arial Flesler 的 jquery.scrollTo.js version 1.4.13。

这是我的设置，其中包含一个 navbar 实例、我尝试滚动到的部分以及我的功能:

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

这是我的第 3 篇文章，是关于一个让它滚动的函数:

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

我对可能是什么问题感到沮丧。它会转到各个部分，但它不滚动。我没有 Spanner 来打这个了。还有其他人有线索吗？....我已经尝试了我在这里找到的不同版本...没有骰子。

Answer 1

我终于明白了……这是我用过的。我不得不走很长的路，挖掘一些基本的 JavaScript，但它成功了:

首先，我像这样设置了我的 hrefs，并使用了 onmousedown 调用:

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

然后像这样设置我的部分:

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