当前位置:首页 » 《关于电脑》 » 正文

Vue3-如何自己写一个“返回顶部”功能

29 人参与  2024年09月20日 16:41  分类 : 《关于电脑》  评论

点击全文阅读


功能描述:

在屏幕的右下角固定一个“返回顶部”按钮,只有当用户滚动屏幕一定程度后出现,否则隐藏。

点击按钮,网页平滑的滚动到页面顶部。

环境:Vue3,js,antd

具体思路:

1、给窗口挂载滚动事件,监听视口的滚动,当滚动距离超出设定阈值后,出现按钮。

2、点击按钮,滚动窗口。

具体代码:

<template>  <div style="height: 100%; overflow-y: auto">    <a-button class="scrollBox" v-show="isShow" @click="goBack">返回顶部</a-button>  </div></template><script setup>import { ref, onMounted, onUnmounted } from 'vue'const isShow = ref(false) // 控制返回顶部按钮的显隐// 监听滚动条const getScrollTop = (e) => {  const clientHeight = document.documentElement.clientHeight || document.body.clientHeight  const currentScrollTop = window.scrollY  // 判断距离顶部多少显示回到顶部图标  if (currentScrollTop > clientHeight) {    isShow.value = true  } else {    isShow.value = false  }}// 返回顶部const goBack = () => {  window.scrollTo({ top: 0, behavior: 'smooth' })}onMounted(() => {  window.addEventListener('scroll', getScrollTop)})</script><style scoped>/* 返回顶部样式 */.scrollBox {  position: fixed;  right: 10px;  bottom: 20px;  z-index: 99;}</style>

一些方法的解释:

document.documentElement.clientHeight

这是文档的根元素(即 <html> 元素)的可视高度。它表示浏览器窗口的视口高度,不包括滚动条的高度。对于大多数现代浏览器,这个值等于视口的高度。

document.body.clientHeight

这是文档的 <body> 元素的可视高度。它同样表示浏览器窗口的视口高度,不包括滚动条的高度。在绝大多数情况下,这个值应该与 document.documentElement.clientHeight 相同。

window.scrollY

这是窗口在垂直方向上滚动的距离。它表示从文档顶部到当前视口顶部的滚动距离。如果页面没有滚动,则这个值为 0。如果页面滚动了一段距离,这个值将显示滚动的像素数。

点击全文阅读


本文链接:http://m.zhangshiyu.com/post/162332.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 从市府大秘到权力巅峰读者推荐_陆一鸣凌思文后续+完结_小说后续在线阅读_无删减免费完结_
  • 周晚黎厉北辰小说(死后我弃夫虐茶,独美不原谅)(周晚黎厉北辰)全书+后续+结局在线阅读
  • 小说大结局小说山与星辰小说已更新+特别篇(林景山苏星辰)纯净版
  • 终章小说顾澜音封灼年完结篇(碑婚)已更新+延伸(顾澜音封灼年)清爽版
  • 宋予柯奕烜小说小说全集+延伸+完本(玩笑沦陷)畅享在线阅读
  • 宋璃陆泽野小说(七零大院:离婚后嫁绝嗣京少多胎)小说结尾+隐藏篇章(宋璃陆泽野)畅享阅读
  • 完结文重生后我让校花保管所有准考证完结+结局+番外宝藏美文列表_完结文重生后我让校花保管所有准考证完结+结局+番外宝藏美文(秦雨然江述怀洛瑶)
  • 重生在高考前,我笑着送小青梅和小混混去庆祝成人礼一口气读完乔念沈晏安陆坤完本_重生在高考前,我笑着送小青梅和小混混去庆祝成人礼一口气读完(乔念沈晏安陆坤)
  • 此后锦书休寄免费品鉴(阮时苒厉寒霆),此后锦书休寄免费品鉴
  • 高分_玩笑沦陷小说(宋予柯奕烜)(玩笑沦陷)全本完整阅读
  • 离婚后,假千金她成了万人迷是什么小说(江浸月陆明渊)(离婚后,假千金她成了万人迷)全本完整清爽版在线+无广告结局
  • 晚晚的重生回到全家被杀的除夕夜+整本林炎晚晚全书在线

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1