首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用滚动位置切换按钮的可见性,使用普通的JavaScript (无JQuery)。注重性能

滚动位置切换按钮的可见性是指根据页面滚动的位置,动态显示或隐藏一个切换按钮,以提供更好的用户体验。以下是一个使用普通的JavaScript实现滚动位置切换按钮可见性的示例代码:

代码语言:txt
复制
<!DOCTYPE html>
<html>
<head>
  <style>
    #scrollButton {
      position: fixed;
      bottom: 20px;
      right: 20px;
      display: none;
    }
  </style>
</head>
<body>
  <!-- 页面内容 -->
  
  <button id="scrollButton">回到顶部</button>

  <script>
    window.addEventListener('scroll', function() {
      var scrollButton = document.getElementById('scrollButton');
      if (window.pageYOffset > 100) {
        scrollButton.style.display = 'block';
      } else {
        scrollButton.style.display = 'none';
      }
    });

    document.getElementById('scrollButton').addEventListener('click', function() {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });
  </script>
</body>
</html>

上述代码中,我们首先在页面底部添加了一个按钮元素,id为"scrollButton",并设置其初始样式为display: none;,即隐藏按钮。然后,通过监听window对象的scroll事件,当页面滚动超过100像素时,将按钮的显示样式设置为display: block;,即显示按钮;否则,将按钮的显示样式设置为display: none;,即隐藏按钮。最后,通过监听按钮的点击事件,当按钮被点击时,使用window.scrollTo()方法将页面滚动到顶部,并添加了平滑滚动的效果。

这种滚动位置切换按钮的可见性在长页面中非常有用,可以让用户快速返回页面顶部,提升用户体验。在实际应用中,可以根据需求进行样式和交互的定制,例如修改按钮的位置、样式、文本等。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云主页:https://cloud.tencent.com/
  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云函数(SCF):https://cloud.tencent.com/product/scf
  • 云数据库 MySQL 版(CDB):https://cloud.tencent.com/product/cdb_mysql
  • 云原生应用引擎(TKE):https://cloud.tencent.com/product/tke
  • 云存储(COS):https://cloud.tencent.com/product/cos
  • 人工智能(AI):https://cloud.tencent.com/product/ai
  • 物联网(IoT):https://cloud.tencent.com/product/iotexplorer
  • 移动开发(移动推送、移动分析):https://cloud.tencent.com/product/mobile
  • 区块链(BCS):https://cloud.tencent.com/product/bcs
  • 元宇宙(Meta Universe):https://cloud.tencent.com/solution/meta-universe
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的视频

领券