vue 获取滚动条位置 返回顶部组件

直接上代码了哈

体验连接 -> https://hongweizhu.com/#/hardware

---

<template>
  <transition name="fade">
    <div class="scroll-to-app-top-nav-wrap" v-show="btnShow">
      <div class="scroll-to-app-top-nav-content" @click="tap_scroll_to_top">
        <img
          src="@/assets/images/icons/scroll_to_app_top_nav.svg"
          alt="回到顶部"
        />
      </div>
    </div>
  </transition>
</template>

<script>
import { defineComponent, ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";

export default defineComponent({
  // 通过 components 去注册
  name: "ScrollToAppTopNav",
  props: {},
  setup() {
    // router 是全局路由对象
    let router = useRouter();
    console.log("router", router);

    // route 是当前路由对象
    let route = useRoute();
    console.log("route", route);

    let btnShow = ref(false);
    let timer = null;

    // 当组件 被挂载时 会做些什么事情
    // 当组件 被初始化完 放在了页面显示出来后 会做些什么事情
    onMounted(async () => {
      window.addEventListener("scroll", scrollToTop);
    });

    function tap_scroll_to_top() {
      timer = setInterval(function () {
        let backTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop;
        let speedTop = backTop / 99; // 控制滚动速度
        document.documentElement.scrollTop = backTop - speedTop;
        if (backTop === 0) {
          clearInterval(timer);
        }
      }, 0);
    }

    function scrollToTop() {
      let scroll = document.documentElement.scrollTop;
      // console.log("scroll", scroll);

      if (scroll >= 99) {
        btnShow.value = true;
      } else {
        btnShow.value = false;
      }
    }

    return {
      btnShow,
      tap_scroll_to_top,

      // top,
      // timer,
      // scrollToTop,
    };
  },
});
</script>

<!-- import reset global -->
<style scoped lang="scss">
@import "@/assets/css/reset.css";
@import "@/assets/css/global.scss";
</style>

<!-- scroll to app top nav -->
<style scoped lang="scss">
.scroll-to-app-top-nav-wrap {
  &:hover {
    box-shadow: 8px 8px 20px 0 rgb(55 99 170 / 20%);
    cursor: pointer;
  }

  position: fixed;
  bottom: 20px;
  right: 20px;

  width: 45px;
  height: 45px;

  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 8px 8px 20px 0 rgb(55 99 170 / 10%);
  // background-image: linear-gradient(0deg, #ffffff 0%, #f3f5f8 100%);

  // color: #f5f5f7;
  background: rgba(255, 255, 255, 0.1);
  // background-color: #fff;
  
  /* 目前 Safari 系浏览器仅支持 -webkit-backdropfilter */
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  z-index: 9999;

  .scroll-to-app-top-nav-content {
    width: 100%;

    img {
      width: 18px;
      height: 18px;
      padding: 13.5px;
    }
  }
}
</style>

<!-- adapt mac ipad iphone screen -->
<style scoped lang="scss">
/* LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL */
@media screen {
}

/* MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM */
@media screen and (max-width: 1024px) {
}

/* SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS */
@media screen and (max-width: 735px) {
}
</style>

---

喜欢或对你有帮助，请点个赞吧，先自己点个。

开发越久，头发越少，且行且珍惜。

有错误或者疑问还请评论指出。

我的个人网站 --> 点击访问 。

---

END