当前位置:首页 » 《随便一记》 » 正文

Vue3一键回到顶部/底部

11 人参与  2024年04月28日 10:57  分类 : 《随便一记》  评论

点击全文阅读


效果图:

 

 示例代码:

<template>  <div class="main">    <div class="box">这是第一个盒子</div>    <div class="box">这是第二个盒子</div>    <div class="box">这是第三个盒子</div>    <div class="box">这是第四个盒子</div>    <div ref="totop" class="totop" @click="scrollToTop">返回顶部</div>  </div></template><script setup lang="ts">const totop = ref();const scrollToTop = () => {  window.scrollTo({    // top: document.documentElement.offsetHeight, //回到底部    top: 0, //回到顶部    left: 0,    behavior: "smooth", //smooth 平滑;auto:瞬间  });};onMounted(() => {  // 页面滚动窗口监听事件  window.onscroll = function () {    // 获取浏览器卷去的高度    let high = document.documentElement.scrollTop || document.body.scrollTop; //兼容各浏览器    if (high >= 900) {      totop.value.style.display = "block";    } else {      totop.value.style.display = "none";    }  };});</script><style scoped lang="scss">.main {  .box {    width: 100vw;    margin: 10px auto;    background-color: rgb(173, 173, 173);    font-size: 50px;    text-align: center;    line-height: 400px;  }  .totop {    display: none;    position: fixed;    bottom: 100px;    right: 50px;    background-color: skyblue;    padding: 10px;    &:hover {      cursor: pointer;      color: #fff;    }  }}</style>

回到底部:

  window.scrollTo({    top: document.documentElement.offsetHeight, //回到底部    left: 0,    behavior: "smooth", //smooth 平滑;auto:瞬间  });

封装BackTop.vue组件

 

 components/BackTop.vue: 

<template>    <div ref="totop" class="totop" @click="scrollToTop" title="返回顶部">        <svg t="1681820716964" class="icon" style="display:block" viewBox="0 0 1024 1024" version="1.1"            xmlns="http://www.w3.org/2000/svg" p-id="6409" width="32" height="32">            <path                d="M866.7 96H157.3c-17.8 0-32.2 14.4-32.2 32.2 0 17.8 14.4 32.2 32.2 32.2h709.5c17.8 0 32.2-14.4 32.2-32.2 0-17.8-14.4-32.2-32.3-32.2zM512 225c-16.5 0-33 6.3-45.6 18.9L169.9 540.3c-5.8 5.8-9.4 13.9-9.4 22.8s3.6 17 9.4 22.8c5.8 5.8 13.9 9.4 22.8 9.4s17-3.6 22.8-9.4l264.2-264.2v574c0 17.8 14.4 32.2 32.2 32.2 17.8 0 32.2-14.4 32.2-32.2v-574l264.2 264.2c5.8 5.8 13.9 9.4 22.8 9.4s17-3.6 22.8-9.4c5.8-5.8 9.4-13.9 9.4-22.8s-3.6-17-9.4-22.8L557.6 243.9C545 231.3 528.5 225 512 225z"                fill="#ffffff" p-id="6410"></path>        </svg>    </div></template>   <script setup lang="ts">const totop = ref();const scrollToTop = () => {    window.scrollTo({        // top: document.documentElement.offsetHeight, //回到底部        top: 0, //回到顶部        left: 0,        behavior: "smooth", //smooth 平滑;auto:瞬间    });};onMounted(() => {    // 页面滚动窗口监听事件    window.onscroll = function () {        // 获取浏览器卷去的高度        let high = document.documentElement.scrollTop || document.body.scrollTop; //兼容各浏览器        if (high >= 500) {            totop.value.style.display = "block";        } else {            totop.value.style.display = "none";        }    };});</script>   <style scoped lang="scss">.totop {    display: none;    position: fixed;    bottom: 120px;    right: 80px;    background-color: #b0b0b0;    padding: 10px;    border-radius: 50%;    &:hover {        cursor: pointer;        background-color: #00000088;    }}</style>

然后直接在页面中使用<BackTop></BackTop>即可


点击全文阅读


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

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

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

最新文章

  • 抽卡后,气运之子怎么都缠上来了小说(夏挽棠)(抽卡后,气运之子怎么都缠上来了)全书+后续+结局在线阅读
  • 前传爱意随风消逝续集:全文+番外乔清浅宋轻舟:结局+番外新上热文
  • 宋昭黎陆铭绪(假如从没拥抱你)前文+全本完整阅读预售作品抢先看
  • 终章小说搬空海港!我携军舰嫁军官躺赢了完结篇(温婉历战)已更新+延伸(搬空海港!我携军舰嫁军官躺赢了)清爽版
  • 贵妻在上:废材老公来护航完结篇(贵妻在上:废材老公来护航)章节目录+章节前文(宋锦瑶霍少霆)全章无套路在线
  • 离婚后,前夫一家给我跪下了隐藏剧情_明白双宿双飞江城必读文_小说后续在线阅读_无删减免费完结_
  • 乔芊芊顾宴夜小说(乔芊芊顾宴夜)(踹了渣男后,禁欲大佬为我失控)前传+阅读全新作品预订
  • 假如从没拥抱你小说(宋昭黎陆铭绪)全本完整阅读最新章节(假如从没拥抱你)_笔趣阁
  • 特工医妃,摄政王的腹黑掌上欢前言+后续_苏清叙裴玄褚最新阅读_小说后续在线阅读_无删减免费完结_
  • 热文推荐绑定站姐系统后,我成娱乐巨头了附加(沈霁月沈暨星)(绑定站姐系统后,我成娱乐巨头了)最新章节列表
  • 爱你的事当做秘密惊天黑幕_鹿言裴禹连载_小说后续在线阅读_无删减免费完结_
  • 和前夫穿越后又重生了番外+结局(挽星阙靖安)小说在线阅读

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

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