0

我有一段代码可以通过animatejQuery 东西向上滚动页面，但是为了提高可用性，如果用户以任何方式干扰滚动动作（例如滚轮、抓住滚动条等），那么它将立即停止动作.

一周前我在这里问了一个问题，但在一些测试人员友好地试用了代码后，他们报告说它在基于 Gecko 的浏览器中不起作用。

这是我到目前为止的代码：

$(document).ready(function() {
    // scroll to top: check if user / animate is scrolling
    var scrollAnimating = false;

    jQuery.fx.step.scrollTop = function(E) {
        scrollAnimating = true;
        E.elem.scrollTop = E.now;
        scrollAnimating = false;
    };

    // go to top (on click)
    $('#gototop').click(function() {
        $(this).fadeOut(100,function() {
            $(this).css({backgroundColor: '#CCC'}).html('Going... (scroll to stop)').fadeIn(100, function() {
                $('html,body').animate({scrollTop:0},3000);
            })
        });

        $(window).scroll(function() {
            if (!scrollAnimating) {
                $('html,body').stop();
                $('#gototop').html('Go to top');
            };
        });

        resetNames();

        return false;
    });

    function resetNames() {
        setTimeout(function() {
            $('#gototop').html('Go to top').css({backgroundColor: '#DDD'});
        },3000);
    }
});

基本上点击#gototop它会开始动画滚动到顶部。如果滚动受到干扰，则滚动运动停止并且文本#gototop被重置。

这段代码有一些问题：有些部分效率低得离谱，并且在基于 Gecko 的浏览器中不起作用（一个大问题）。

我如何让它工作？关于如何提高效率的任何指示？

4

2 回答 2

0

简单地尝试 Gecko 的 $('body') 选择器，你可能会发现你的动画在 Opera 中也很混乱，因为 html 和 body 选择器都可用并且操作执行了两次。尝试这样的事情（小测试用例）：

    <html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            function scrollWin()
            {
                $('body').animate({scrollTop: $('html').offset().top}, 2000);
            }

            function scrollStop()
            {
                $('body').stop();
            }
        </script>
    </head>
    <body onkeyup="scrollStop()">
        <div style="background:grey;height:1500px"></div>
        <input type="button" onclick="scrollWin();" value="Scroll up" />
    </body>
</html>

唯一的问题是，如果您按 Enter 或空格之类的东西，您将停止动画，但由于您仍然选择了按钮，所以再次重新启动它，因此任何其他键都可以使用，或者您可以单击文档（关闭按钮）然后使用 enter 或空格键...基本上 onkeyup 只是另一个事件，向您展示 $('body').stop() 是您真正追求的。

于 2009-11-16T06:01:14.597 回答
0

只是想为通过谷歌找到这个问题的任何人回答这个问题：

在这里找到了答案：让用户滚动停止滚动顶部的 jquery 动画？

基本上，不是使用变量然后检查变量的滚动，而是将一个函数绑定到'html, body'仅在用户进行滚动并停止动画时才激活的函数。

本质上：

// Stop the animation if the user scrolls.
$('html, body').bind("scroll mousedown DOMMouseScroll mousewheel keyup", function(e){
    if ( e.which > 0 || e.type === "mousedown" || e.type === "mousewheel"){
        $('html, body').stop();
    }
});

根据OP的上下文回答：

$(document).ready(function() { 
    // go to top (on click)
    $('#gototop').click(function() {
        $(this).fadeOut(100,function() {
            $(this).css({backgroundColor: '#CCC'}).html('Going... (scroll to stop)').fadeIn(100, function() {
                $('html,body').animate({scrollTop:0},3000);
            })
        });
        return false;
    });
});
function resetNames() {
    setTimeout(function() {
        $('#gototop').html('Go to top').css({backgroundColor: '#DDD'});
    },3000);
}
// Stop the animation if the user scrolls.
$('html, body').bind("scroll mousedown DOMMouseScroll mousewheel keyup", function(e){
    if ( e.which > 0 || e.type === "mousedown" || e.type === "mousewheel"){
        $('html, body').stop();
        resetNames();
    }
});

注意：未经测试，我认为这可能也会停止所有其他动画。

于 2013-08-09T08:28:57.793 回答