Question

我正在尝试创建一个超级简单的Scroll to top按钮。

它有效，但每当我滚动时，它都会将按钮附加到身体上。

我想只将它附加一次并淡入它，如果你点击它，你将会滚动回到页面顶部，它会淡出。

该功能正在运行，但它会在循环中将其附加到页面。

我知道这是一个简单的错误，但我无法弄清楚。

我的代码：

$(window).scroll(function () {
    var scrollPosition = $(this).scrollTop();
    var to_top = '<a class="back-to-top" href="#"></a>';

    if (scrollPosition >= 500) {
        $("body").append(to_top);
        $('.back-to-top').fadeIn(1600);
    } else {
        $('.back-to-top').fadeOut(800);
    }

    $( ".back-to-top" ).on( "click", function(event) {
        event.preventDefault();
        $("html, body").animate({ scrollTop: 0 }, "slow");
    });
});

Answer 1

好吧，你告诉它每次触发滚动事件时附加，所以先检查它是否存在，看看它是否适合你。

$(window).scroll(function () {
  var scrollPosition = $(this).scrollTop();
  var toTops = $('.back-to-top'); // get jQ object once
      if (scrollPosition >= 500) {
        if (!toTops.length){ // if no elems

            // create one
            var $to_top = $('<a class="back-to-top" href="#"></a>');
            $to_top.on( "click", function(event) {
                event.preventDefault();
                $("html, body").animate({ scrollTop: 0 }, "slow");
            });

            // then attach it
            $("body").append($to_top);
        } else { 

           // if elems exist, fade them in
           toTops.fadeIn(1600);
        }

      } else {
        toTops.fadeOut(800);
      }


});

Answer 2

您应该创建一次按钮，然后隐藏/显示它。

jQuery(function($) {
    var to_top = $('<a class="back-to-top" href="#"></a>'),
    visible = false;
    to_top.appendTo('body').hide();

    $( ".back-to-top" ).on( "click", function(event) {
        event.preventDefault();
        $("html, body").animate({ scrollTop: 0 }, "slow");
    });

    $(window).scroll(function () {
        if ($(this).scrollTop() >= 500)
            if(!visible){
                to_top.stop(true,false).fadeIn(1600);
                visible = true;
            }
        else
            if(visible){
                to_top.stop(true,false).fadeOut(800);
                visible = false;
            }
    });
});

滚动到热门jQuery

2 个答案: