Question

我正在尝试为动态插入的“滚动到顶部”按钮的隐藏和显示设置动画

$('.content').append('<button id="scroll_to_top_btn" title="Go to top"><i class="fas fa-arrow-up"></i></button>');
            
            //Show Scroll to top button when scroll and hide when on top
            $('.page-content-news').on('scroll', function () {
              var scrollTop = this.scrollTop;
              if(scrollTop > 0){
                  $('#scroll_to_top_btn').animate({'display': 'block'});
              }
              else{
                  $('#scroll_to_top_btn').animate({'display': 'none'});
              }
            })

但是当我滚动页面时不要动画（适用于 hide() 和 show()）

我做错了吗？

Answer 1

你可以用一些样式来做到这一点。

#scroll_to_top_btn {
  transition-duration: 0.3s;
  opacity: 1;
}
#scroll_to_top_btn.hide {
  opacity: 0;
}

并添加/删除隐藏类而不是动画。

$('.content').append('<button id="scroll_to_top_btn" title="Go to top"><i class="fas fa-arrow-up"></i></button>');
            
//Show Scroll to top button when scroll and hide when on top
$('.page-content-news').on('scroll', function () {
  var scrollTop = this.scrollTop;
  if(scrollTop > 0){
    $('#scroll_to_top_btn').removeClass('hide');
  } else {
    $('#scroll_to_top_btn').addClass('hide');
  }
})

在 Framework7 上动画隐藏和显示

1 个答案: