javascript - 上下滚动不起作用

Question

我在滚动时遇到问题，2 个 if 条件在延迟一段时间后始终激活。我不明白为什么。这是我遇到问题的网站:www.fitfaza.pl - 右下角的灰色 anchor 。

代码:

// hide #back-top first
jQuery("#back-top").hide();
jQuery("#back-top2").hide();
// fade in #back-top
jQuery(function() {
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > 500) {
            jQuery('#back-top').fadeIn();
            jQuery('#back-top2').fadeIn();
        } else {
            jQuery('#back-top').fadeOut();
            jQuery('#back-top2').fadeOut();
        }
    });


    jQuery('#back-top a').click(function() {

        jQuery('body,html').animate({
            scrollTop: 0
        }, 800);
        return false;
    });

    $(window).scroll(function() {
        var scroll = $(window).scrollTop();
        if (scroll <= 1089) {

            jQuery('#back-top2 a').click(function() {

                jQuery('body,html').animate({
                    scrollTop: 3390
                }, 800);
                return false;
            });
            $("html, body").bind("scroll mousedown DOMMouseScroll mousewheel keyup", function() {
                $('html, body').stop();
            });
        };
        if (scroll >= 3390) {

            jQuery('#back-top2 a').click(function() {

                jQuery('body,html').animate({
                    scrollTop: 1
                }, 800);
                return false;
            });
            $("html, body").bind("scroll mousedown DOMMouseScroll mousewheel keyup", function() {
                $('html, body').stop();
            });
        };
    });

});

Answer 1

这是一个优化的脚本，似乎有效果 - 尽管我无法在不轻松消除当前事件脚本的情况下很好地测试网站上的实际响应。因此，您可能需要对其进行测试并提供有关其功能的一些反馈。不管怎样，尝试用这个替换:

http://codepen.io/anon/pen/pvMmyJ?editors=001

$(function () {

  var gate = $(window);
  var root = $('html, body');
  var backtop = $('#back-top2');
  var scroll;
  backtop.hide();

  gate.scroll(function() {

    scroll = gate.scrollTop();

    if (scroll >= 500 && !backtop.is(':visible')) backtop.fadeIn();
    if (scroll < 500 && backtop.is(':visible')) backtop.fadeOut();
  });

  backtop.click(function() {
    if (scroll < 1090) root.animate({scrollTop: 3390}, 800);
    if (scroll >= 3390) root.animate({scrollTop: 0}, 800);
  });

  root.on('scroll mousedown touchstart DOMMouseScroll mousewheel keyup', function() {
    root.stop();
  });

});

查看该网站的页面源，<a> anchor 图像周围的标签并不是真正必要的。看来$不是保留字符，因此无需使用 jQuery对于对象。缓存一些重用的变量也可以稍微优化脚本。