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>

我对可能出现的问题感到沮丧。它会进入各个部分，但不是滚动。我用扳手来打这个。其他人都有线索了......我已经尝试了我在这里发现的不同版本......没有骰子。

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>

HTML5中的jQuery ScrollTo问题

1 个答案: