Question

我试图在我的网站上实现滚动到顶部动画 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>

Answer 1

我知道发生了什么。每当“滚动到顶部”发生时，您就会绑定一个新的“点击”事件。因为它们加起来，每次滚动条冻结1秒钟。因此，当您第一次滚动到顶部时，没有任何冻结。下次冻结一秒钟，下一次冻结2秒钟等等。

我认为你需要：

$message.unbind('click');

之前：

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

即：

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

如果你不相信我，可以通过做几次“go to top”来冻结它，然后在Firebug控制台中写下来：

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

再试一次。您将看到冻结消失（直到您再次使用'click'事件的多个绑定累积它。）

干杯。

jquery滚动到顶部动画

1 个答案: