Question

我正在练习创建一个简单的Back-To-Top按钮，该按钮在滚动页面一定量后激活。这是 jQuery

$(document).ready(function () {
    $(window).scroll(function() {
    if ($(this).scrollTop() > offset) {
        $('.back-to-top-button').fadeIn(200);
    } else {
        $('.back-to-top-button').fadeOut(200);
    }
});

});



/*Scroll Plugin*/
$('.back-to-top-button').click(function(event) { 
    $('html, body').animate({scrollTop: 0}, 'slow');
    event.preventDefault();
});

这就是我将其置于 HTML

的方式

<a href="#" class="back-to-top-button" style="display: inline;">
                <i class="fa fa-chevron-circle-up"></i>
        </a>

问题是，它不会向上滚动，而只是跳到顶部。我在网上找不到任何解决方案，因为它似乎只在我的网站上发现，每次我在其他网站上尝试它都有效。

Answer 1

它现在有效。我已在event handler函数

中声明了document ready

$(document).ready(function () {

var offset = 250;
var duration = 300;
$(window).scroll(function() {
    if ($(this).scrollTop() > offset) {
        $('.back-to-top-button').fadeIn(duration);
    } else {
        $('.back-to-top-button').fadeOut(duration);
    }
});


/*Scroll Plugin*/
$(".back-to-top-button").click(function(event) { 
        $('html, body').animate({scrollTop: 0}, 'slow');
        event.preventDefault();
    });

});

Jquery回到顶部按钮跳转到顶部而不是滚动

1 个答案: