Question

我有一个“下一个”按钮，每次点击它都会滚动100％的窗口高度。当它位于页面底部时，它会滚动到顶部。问题是“下一个”按钮和顶部栏有一个位置：固定，有时，当我滚动时，它们正在跳跃。我不明白为什么...... 我看了StackOverflow，看到了一些“解决方案”，但都没有用。这是我的javascript和html（全部简化）。

HTML：

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body style="height:100%;width:100%">
        <header>Fixed top bar</header>
        <a>Fixed next button</a>
        <div class="content" style="height:100%;width:100%">
            <section style="height:100%;width:100%">Block1</section>
            <section style="height:100%;width:100%">Block2</section>
        </div>
        <script src="jquery.js"></script>
        <script src="scroll.js"></script>
    </body>
</html>

和js：

(
    function ()
    {
        var _button,
            _body,
            _window,
            MARGIN,
            MOVING;

        _window = $( window );

        _document = $( document );

        _body = $("html, body");

        _button = $('#next');

        MARGIN = 50;

        MOVING = false;




        function isScrollToBottom()
        {
            return (_window.height() + _window.scrollTop() + MARGIN) >= _document.height();
        }



        function onScroll()
        {
            if (isScrollToBottom() && !_button.hasClass('top'))
            {
                _button.addClass('top');
            }
            else if (!isScrollToBottom() && _button.hasClass('top'))
            {
                _button.removeClass('top');
            }
        }


        function scrollNext(e)
        {
            if (MOVING)
            {
                return;
            }

            var scrollTop = _window.scrollTop() + (_window.height() - ((_window.scrollTop()+1) % _window.height()));

            if (isScrollToBottom())
            {
                scrollTop = 0;
            }

            MOVING = true;

            _body.animate(
                {
                   scrollTop: scrollTop + "px"
                },
                750,
                function ()
                {
                    MOVING = false;
                }
            );

            e.preventDefault();
        }



        _window.bind('scroll', onScroll);
        _button.bind('click', scrollNext);
    }
)()

关于CSS，标题和a是位置：固定并具有顶部/底部左/右属性。并且html / body / sections的高度为100％（最小）。

希望你明白并且你会帮助我:(

编辑：http://jsfiddle.net/94wv2n6n/1/ 这是一个JSFiddle，我认为它会有所帮助

修复了使用JQuery滚动时跳转的元素

0 个答案: