Question

我正在尝试添加jQuery平滑滚动，单击按钮会将我带到页面顶部，但动画无法正常工作。

jQuery(function( $ ){

    //Check to see if the window is top if not then display button
    $(window).scroll(function(){
        if ($(this).scrollTop() > 800) {
            $('.fa-chevron-up').fadeIn();
        } else {
            $('.fa-chevron-up').fadeOut();
        }
    });

    //Click event to scroll to top
    $('.fa-chevron-up').click(function(){
        $('html,body').animate({scrollTop : 0}, 800);
        return false;
    });

});

这是滚动时出现的按钮 -

<a href="#" class="scrolltotop"><i class="fas fa-chevron-up"></i></a>

尝试过jQuery（文档）仍然没有运气。有什么想法吗？

Answer 1

jQuery(function($) {
    //Check to see if the window is top if not then display button
    $(window).scroll(function() {
        if ($(this).scrollTop() > 100) {
            $('.scrolltotop').fadeIn();
        } else {
            $('.scrolltotop').fadeOut();
        }
    });

    //Click event to scroll to top
    $('.scrolltotop').click(function(e) {
        $('html, body').animate({scrollTop : 0}, 800);
        e.preventDefault();
    });
});

a.scrolltotop {
  bottom: 10px;
  display: none;
  position: fixed;
  right: 10px;
}

html {
  overflow-y: scroll;
}

div.content {
  height: 400vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="content">&nbsp;</div>
<a href="#" class="scrolltotop"><i class="fas fa-chevron-up"></i>^ Up</a>

动画无效，因为它未被调用。页面滚动回到顶部的原因是因为您实际导航到未定义的锚点（href="#"）。

改变这个：

jQuery('.fa-chevron-up').click(function(){

对此：

jQuery('.scrolltotop').click(function() {

由于font-awesome图标通常通过将字符指定为应用类的元素的伪元素来工作，因此如果直接单击图标，它可能会按预期工作。无论如何，您应该通过a选择器将点击处理程序应用于.scrolltotop标记元素。

注意：我还更新了淡入淡出行为的选择器。

jQuery动画到顶部功能不起作用

1 个答案: