2

我试图在我的网站 http://www.cmclove.org/bootstrap上实现滚动到顶部的动画

但每当我滚动到顶部并尝试向下滚动时，似乎该页面正在与我作斗争并且不想再向下滚动。

您可能需要做几次，或者尝试在动画完成后立即向下滚动

继承人的jQuery：

$(document).ready(function() {
    $(function() {

        /* set variables locally for increased performance */

        var scroll_timer;
        var displayed = false;
        var $message = $('#message a');
        var $window = $(window);
        var top = $(document.body).children(0).position().top;

        /* react to scroll event on window */
        $window.scroll(function(e) {

            window.clearTimeout(scroll_timer);
            e.preventDefault();
            scroll_timer = window.setTimeout(function(e) {
                if ($window.scrollTop() <= top) {
                    displayed = false;
                    $message.fadeOut(800);
                    e.preventDefault();

                }
                else if (displayed == false) {
                    displayed = true;
                    $message.stop(true, true).show(1000).click(function(e) {
                        $('html, body').animate({
                            scrollTop: 0
                        }, 'slow');
                        $message.fadeOut(1000);
                        e.preventDefault();


                    });
                }

            }, 100);
        });
    });
});​

继承人的html

  <a id="top"></a>

  <!--- all my html stuff -->

  <div id="message"><a href="#top"></a></div>
  </footer>
4

1 回答 1

1

我知道发生了什么。每次“滚动到顶部”发生时，您都会绑定一个新的“点击”事件。而且由于它们加起来，每次滚动条多冻结 1 秒。因此，当您第一次滚动到顶部时，什么都不会冻结。下一次它冻结一秒钟，下一次冻结 2 秒钟等等。

我认为你需要：

$message.unbind('click');

就在之前：

$message.stop(true, true).show(1000).click(function(e) {

IE：

else if (displayed == false) {
  displayed = true;
  $message.unbind('click');
  $message.stop(true, true).show(1000).click(function(e) {
  ...

如果您不相信我，请通过执行几次“转到顶部”使其冻结，然后在 Firebug 控制台中编写以下代码：

$('#message a').unbind('click');

再试一次。您会看到冻结已经消失（直到您再次使用多个“click”事件绑定来累积它）。

干杯。

于 2012-12-10T21:36:25.430 回答