CSS实现回到顶部

最新推荐文章于 2024-09-08 16:45:30 发布

仙女叔叔

最新推荐文章于 2024-09-08 16:45:30 发布

阅读量1.4k

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_52070860/article/details/122618792

版权

不罗嗦了，代码上有注释

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>back to top</title>
  <link rel="stylesheet" type="text/css" href="try.css" />
  <script src="main.js"></script>
</head>

<body>
  <div class="box">
    浏览器自带的原始滚动条很不美观，在一些特殊需求中，我们需要对滚动条的样式单独设置，因此就出现了用-webkit-scrollbar来自定义滚动条的样式。。
    首先
    webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。
    滚动条的组成
    ::-webkit-scrollbar 滚动条整体部分
    ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
    ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
    ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
    ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
    ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
    ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
  </div>
  <div class="el-backtop" style="right: 100px; bottom: 150px;"></div>
</body>

</html>

CSS

* {
  margin: 0;
  padding: 0;
}
.box {
  width: 100px;
  height: 1500px;
  margin: 0 auto;
  background-color: aqua;
}
.el-backtop {
  position: fixed;
  background-color: bisque;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #409eff;
  /* 初始设置为none */
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 0 6px rgb(0 0 0 / 12%);
  cursor: pointer;
  z-index: 5;
  transition: display 1s;
}
.el-backtop:hover {
  background-color: #409eff;
}
/* 以下为侧边滚动条样式的设计,可以不用看 */
/* 滚动条整体样式 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  /* background-color: #14355c;*/
  border-radius: 10px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  /* -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); */
  background-color: rgba(0, 121, 255, 0.1);
  border-radius: 10px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.44, rgba(62, 145, 248, 0.5)),
    color-stop(0.72, rgba(62, 145, 248, 0.5)),
    color-stop(0.86, rgba(62, 145, 248, 0.5))
  );
}

::-webkit-scrollbar-thumb:hover {
  border-radius: 10px;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.44, rgba(62, 145, 248, 0.8)),
    color-stop(0.72, rgba(62, 145, 248, 0.8)),
    color-stop(0.86, rgba(62, 145, 248, 0.8))
  );
}

/* 滚动条边角
::-webkit-scrollbar-corner {
  background-color: rgba(62, 145, 248, 0.5);
} */

JS

window.onload = function () {
  // 获取元素对象
  var div = document.querySelector(".el-backtop");
  //定时器变量
  var time = null;
  //滚轮监听事件，隐藏显示按钮
  window.onscroll = function () {
    if (document.documentElement.scrollTop === 0) {
      div.style.display = "none";
    } else {
      div.style.display = "flex";
    }
  };
  //绑定点击事件
  div.onclick = function () {
    // scrollTop获取元素顶部滚轮离顶部的长度
    var step = document.documentElement.scrollTop;
    time = window.setInterval(function () {
      // 每次30px
      step -= 30;
      if (step <= 0) {
        window.clearInterval(time);
      }
      // 滚动到指定位置，scrollTo()接收两个参数：X，Y
      window.scrollTo(0, step);
      //这里时间太慢或者步长太大的话会不流畅，尽量快一点；当然也可以用JQ的动画去写，这样写可以不利用JQ，方便一点
    }, 10);
  };
};