Question

几天前，我开始与我的公司网站合作。我看到它丢失了所以我决定用动画滚动到顶部按钮。我是编程的菜鸟，所以我决定在互联网上看。在那里我找到了this的例子。我完全复制了整个代码，但它不起作用。

html中的按钮：

<a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a>

这是jQuery：

$(window).scroll(function() {
    if ($(this).scrollTop() >= 50) {        
        $('#return-to-top').fadeIn(200);    
    } else {
        $('#return-to-top').fadeOut(200);   
    }
});
$('#return-to-top').click(function() {      
    $('body, html').animate({
        scrollTop : 0                       
    }, 500);
});

我不知道问题是什么，因为它适用于codepen。有谁知道如何解决这个问题？

提前致谢

Answer 1

你应该这样做：

$('#return-to-top').click(function(e) {
e.preventDefault();      
$('body, html').stop().animate({
    scrollTop : 0                       
}, 500);
});

首先，检查是否包含jQuery：

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" 
crossorigin="anonymous"></script>

Answer 2

没有足够的信息，但如果您使用codepen中的相同代码，那么您可能需要在网站标题中包含jQuery。（https://cdnjs.com/libraries/jquery/）

Answer 3

您使用的是哪种浏览器？

无论如何，$(window).scrollTop(0);似乎所有浏览器都支持，但是如果你想为滚动设置动画，$('html,body').animate({scrollTop:0},500);，就像你正在使用的那样，如果你可以分享您的 HTML和CSS代码，也许问题出在 z-index 或尝试将宽度和高度＆＃34; .icon-chevron-up＆＃34;也是##;＃return-to-top＆＃34;。

似乎一切正常，请尝试使用console.log('some string here');查看代码是否正在运行。

另外，检查是否添加了jquery脚本： script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

希望你解决它。

Answer 4

我注意到很多人都告诉我要包含jquery库。我之前添加了库，但在检查了答案后，我注意到我添加了错误的库。所以现在它已经确定了很多人。

动画滚动到顶部按钮不起作用

4 个答案: