关于命名

我也不知道这个具体的名字叫什么，就按照它的功能起了这么个简单的名字，防止说不清楚，大概解释一下是什么东西。就是在很多网页，我们往下滑时，会在页面的固定位置出现一个(一栏、一片等！)按钮，里面有帮助回到网页顶部的，还有联系网站客服等等的操作。

像这样

分析

问题

首先就是根据喜好做一排这样的区域(自行发挥)
其次就是确定它要出现的位置( 重点 )即可。
还有几个小细节，就是当回到页面顶部时，这一部分区域会隐藏，当再次滑动到页面非顶部的位置是，又会再一次出现。

解决

固定位置：通过position的fixed固定
通过opacity控制显示显示/隐藏
判断何时显示/隐藏:通过获取滚动条滚动的height判断

用到的知识

css

position

scrollTop

获取滚动条滚动过的height

scrollTo

scrollTo() 方法可把内容滚动到指定的坐标。

onwheel

鼠标滑轮滚动事件
onmousewheel注意，有些文章是写的这个事件，该事件已经废弃(但是有的环境还是可以用)，换成了onwheel

代码

CSS

...
/* 页面主要内容 */
.con {
  width: 100vw;
  /* 让页面出现滚动条 */
  height: 1100vh;
  background-color: lightcoral;
}
/* 浮动功能栏样式  */
.float {
  padding: 0;
  margin: 0;
  position: fixed;
  top: 70vh;
  right: 5vw;
  /* 默认不显示 */
  opacity: 0;
  z-index: 0;
  transition: all 0.5s;
}
/* 其他样式 */
li {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  list-style: none;
  background-color: #ffffff;
  border-radius: 50%;
  cursor: pointer;
}

HTML

<div class="con" id="con"></div>
<ul class="float" id="float">
  <li id="backtop">BACK</li>
</ul>

let con = document.querySelector("#con");
let float = document.querySelector("#float");
let backtop = document.querySelector("#backtop");
// des:设置浮动功能栏的显示/隐藏
let set = function (op, zi) {
  float.style.opacity = op;
  float.style.zIndex = zi;
};
// 点击back返回顶部
backtop.addEventListener("click", function () {
  // 1.document.documentElement.scrollTop = 0;
  // 2.scrollTo返回
  scrollTo(0, 0);
  // 返回后隐藏
  set(0, 0);
});
// 这里更好的效果是换成window的滚动条事件,这样无论是鼠标滑轮还是，键盘翻页键，还是点击滚动条都可以触发
// window.addEventListener("scroll",***)
con.addEventListener("wheel", function () {
  // 获取可视区域宽高
  let viewHeight = document.documentElement.clientHeight;
  // 获取已经滚动条滚动了的高度
  let scrowHeight = document.documentElement.scrollTop;
  // 获取文档高
  let documentHeight = document.body.clientHeight;
  if (scrowHeight === 0) {
    // 隐藏按钮
    set(0, 0);
  } else {
    // 显示按钮
    set(10, 99);
  }
});