获取页面底部显示返回顶部按钮功能怎么做

获取页面底部显示返回顶部按钮的功能通常是在网页设计中为了提供用户便利而添加的。这种功能常见于长滚动内容的页面，当用户滚动到底部时，会自动出现一个“回到顶部”或类似按钮，点击后快速导航回页面顶部。

实现这个功能的方法有很多种，以下是其中一种常见的HTML、CSS和JavaScript结合的方式：

1. HTML部分：

<button id="back-to-top" class="hidden">返回顶部</button>

这里创建了一个隐藏的`<button>`元素作为返回顶部的容器。

2. CSS部分（隐藏初始状态）：

.hidden {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px;
  background-color: #333;
  color: white;
  border-radius: 4px;
}

这设置了按钮的样式，使其默认隐藏。

3. JavaScript部分（事件监听）：

window.addEventListener('scroll', function() {
  if (window.pageYOffset >= document.body.scrollHeight - window.innerHeight * 0.8) {
    document.getElementById('back-to-top').classList.remove('hidden');
  } else {
    document.getElementById('back-to-top').classList.add('hidden');
  }
});

这部分代码会在用户滚动到页面底部80%以上时，显示按钮；当滚动上移时，再将其隐藏。