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

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

<!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()方法将页面滚动到顶部，并添加了平滑滚动的效果。

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

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