jQuery 写悬浮球

悬浮球是一种常用的前端交互效果，可以实现页面滚动时，悬浮球始终跟随在页面的某个位置，方便用户快速返回页面顶部或进行其他操作。以下是使用 jQuery 实现悬浮球的示例代码：

HTML 代码：

<div id="float-ball"></div>

CSS 代码：

#float-ball {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 50px;
  height: 50px;
  background-color: #f00;
  border-radius: 50%;
  cursor: pointer;
  display: none;
}

JavaScript 代码：

$(function() {
  var ball = $('#float-ball'); // 获取悬浮球元素
  $(window).scroll(function() {
    // 滚动事件监听
    var scrollTop = $(window).scrollTop(); // 获取当前页面滚动距离
    if (scrollTop >= 200) {
      ball.fadeIn(); // 当滚动距离大于等于 200 时，显示悬浮球
    } else {
      ball.fadeOut(); // 否则，隐藏悬浮球
    }
  });
  ball.click(function() {
    // 点击事件监听
    $('html,body').animate({scrollTop:0}, 500); // 返回页面顶部
  });
});

以上代码实现了一个红色的圆形悬浮球，当页面滚动距离大于等于 200 时，悬浮球显示出来，当点击悬浮球时，页面会平滑地返回顶部。你可以根据自己的需求修改 CSS 样式和 JavaScript 代码来实现不同的悬浮球效果。