vue 实现返回顶部功能-指定盒子滚动区域

news2025/1/11 12:34:46

vue 实现返回顶部功能-指定盒子滚动区域

  • html代码
  • css代码
  • 返回顶部
  • 显示/隐藏返回标志

在这里插入图片描述

html代码

  <a-icon
      type="vertical-align-top"
      class="top"
      name="back-top"
      @click="backTop"
      v-if="btnFlag"
    />

css代码

.top {
  height: 35px;
  width: 37px;
  position: fixed;
  right: 5%;
  bottom: 5%;
  text-align: center;
  line-height: 45px;
  font-size: 20px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0px 1px 3px 1px #888888;
  z-index: 999;
}

返回顶部

    backTop() {
      const timer = setInterval(() => {
        let scrollTop = document.getElementsByClassName("wk-layout_body")[0].scrollTop;
        let ispeed = Math.floor(-scrollTop / 5);
        document.getElementsByClassName("wk-layout_body")[0].scrollTop = scrollTop + ispeed;
        if (scrollTop === 0) {
          clearInterval(timer);
        }
      });
    },

显示/隐藏返回标志

data() {
    return {
   btnFlag: false,
   }
 },
   
 mounted() {
    window.addEventListener("scroll", this.scrollToTop, true);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop);
  },
  scrollToTop() {
      let elVal = document.getElementsByClassName("wk-layout_body")[0];
      let windowHeight = elVal.offsetHeight / 2;
      const that = this;
      that.scrollTop = elVal.scrollTop;
      if (that.scrollTop > windowHeight) {
        that.btnFlag = true;
      } else {
        that.btnFlag = false;
      }
    },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1292259.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2023年天猫淘宝双12红包口令领取时间是从什么时候开始年终好价节活动?

2023年淘宝双12红包年终好价节活动时间 「领取时间」2023年淘宝年终好价节红包领取时间是从2023年12月8日00:00开始持续到12月12日23:59结束&#xff0c;在活动时间内每天都可以领取一次淘宝2023年终好价节红包&#xff0c;最高可得8888元淘宝超级红包&#xff1b; 「使用时间…

Python实现word自动化

个人网站 文章首发于公众号&#xff1a;小肖学数据分析 介绍 本教程将介绍如何使用Python的python-docx库来自动化Microsoft Word文档的创建和编辑工作&#xff0c;从而提高办公效率和准确性。 前提条件 基本的Python编程知识。 Python环境已安装python-docx库&#xff08;…

MySQL高级--01_1--数据库缓冲池(buffer pool)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 数据库缓冲池(buffer pool)DBMS 会申请占用内存来作为数据缓冲池&#xff0c;在真正访问页面之前&#xff0c;需要把在磁盘上的页缓存到内存中的Buffer Pool 之后才…

使用Inno Setup 打包程序文件 怎么把其中一个文件安装时复制到指定系统文件夹

环境: Inno Setup 6.6 Win10 专业版 问题描述: 使用Inno Setup 打包程序文件 怎么把其中一个文件安装时复制到指定系统文件夹 将文件api-ms-win-shcore-scaling-l1-1-1.dll复制到system32里面 解决方案: 1.由于安全和权限的限制,直接在Inno Setup脚本中复制文件到C:\…

如何使用phpStudy本地快速搭建网站并内网穿透远程访问

文章目录 使用工具1. 本地搭建web网站1.1 下载phpstudy后解压并安装1.2 打开默认站点&#xff0c;测试1.3 下载静态演示站点1.4 打开站点根目录1.5 复制演示站点到站网根目录1.6 在浏览器中&#xff0c;查看演示效果。 2. 将本地web网站发布到公网2.1 安装cpolar内网穿透2.2 映…

RuntimeError: CUDA error: out of memory怎么解决

遇到这个问题的原因是之前的程序没有结束进程。 需要打开Linux的命令窗口。输入命令 nvidia-smi 发现有很多的进程没有结束。使用如下命令查看进程 发现这些黄色框里的进程就是需要结束掉的进程。 查看当前conda的环境都有哪些&#xff0c;目前项目主要用到的是main这个。 使…

12_企业架构之Tomcat部署使用

Tomcat 学习目标和内容 1、能够描述Tomcat的使用场景 2、能够简单描述Tomcat的工作原理 3、能够实现部署安装Tomcat 4、能够实现配置Tomcat的service服务和自启动 5、能够实现Tomcat的Host的配置 6、能够实现Nginx反向代理Tomcat 7、能够实现Nginx负载均衡到Tomcat 一、Tomcat介…

git-vscode

git-vscode ctrlshiftp 创建分支 create branch 直接切到新的分支了 切换分支 直接点左下角自己选择 vscode中配置仓库 https://blog.csdn.net/zora_55/article/details/129709251 推送tag tag作用就是在 Git 中&#xff0c;标记存储库历史记录中特定提交的一种方式。t…

生成器简述 - python 基础进阶知识点补全(一)

可迭代对象&#xff1a; 可以用于for ... in ..循环对对象都是可迭代对象&#xff0c;比如&#xff1a; list tuple dict set 可以迭代的对象就是可迭代对象&#xff0c;python 中一切都是对象&#xff0c;在这里主要说的是变量 a [1,2,3] b (1,2,3,) c "1234&q…

docker---数据卷

数据卷&#xff08;数据共享&#xff09; 数据卷是一个供容器使用的特殊目录&#xff0c;位于容器中。可将宿主机的目录挂载到数据卷上&#xff0c;对数据卷的修改操作立刻可见&#xff0c;并且更新数据不会影响镜像&#xff0c;从而实现数据在宿主机与容器之间的迁移。数据卷的…

TCP协议一对一聊天UDP协议群聊

一对一聊天 服务端&#xff1a; package 一对一用户;import java.awt.BorderLayout; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.PrintWriter; import java.net.ServerSocket; import java.net.Socket; …

进行生成简单数字图片

1.之前只能做一些图像预测,我有个大胆的想法,如果神经网络正向就是预测图片的类别,如果我只有一个类别那就可以进行生成图片,专业术语叫做gan对抗网络 2.训练代码 import torch import torch.nn as nn import torch.optim as optim import torchvision.transforms as transfo…

排序分析(Ordination analysis)及R实现

在生态学、统计学和生物学等领域&#xff0c;排序分析是一种用于探索和展示数据结构的多元统计技术。这种分析方法通过将多维数据集中的样本或变量映射到低维空间&#xff0c;以便更容易理解和可视化数据之间的关系。排序分析常用于研究物种组成、生态系统结构等生态学和生物学…

java--枚举

1.枚举 枚举是一种特殊类 2.枚举类的格式 注意&#xff1a; ①枚举类中的第一行&#xff0c;只能写一些合法的标识符(名称)&#xff0c;多个名称用逗号隔开。 ②这些名称&#xff0c;本质是常量&#xff0c;每个常量都会记住枚举类的一个对象。 3.枚举类的特点 ①枚举类的…

Java 第21章 网络通信

网络程序设计基础 网络程序设计编写的是与其他计算机进行通信的程序。Java 已经将网络程序所需要的元素封装成不同的类&#xff0c;用户只要创建这些类的对象&#xff0c;使用相应的方法&#xff0c;即使不具备有关的网络支持&#xff0c;也可以编写出高质量的网络通信程序。 …

JPA(Java Persistence API)是什么

JPA的官网地址&#xff1a;https://jcp.org/en/jsr/detail?id338 当前最新的版本是2.2版本&#xff1a;https://jcp.org/aboutJava/communityprocess/mrel/jsr338/index.html JPA是一个Java持久化的API&#xff0c;通过这个API&#xff0c;在Java EE和Java SE 环境中管理持…

鸿蒙开发ServiceAbility基本概念

时间过长&#xff0c;开发者必须在Service里创建新的线程来处理&#xff08;详见线程间通信&#xff09;&#xff0c;防止造成主线程阻塞&#xff0c;应用程序无响应。 创建Service 介绍如何创建一个Service 创建Service的代码示例如下&#xff1a;查看获取鸿蒙开发 (qq.com)…

HTTP 缓存机制

一、强制缓存 只要浏览器判断缓存没有过期&#xff0c;则直接使用浏览器的本地缓存而无需再请求服务器。 强制缓存是利用下面这两个 HTTP 响应头部&#xff08;Response Header&#xff09;字段实现的&#xff0c;它们都用来表示资源在客户端缓存的有效期&#xff1a; Cache…

ChatGPT学习笔记

1 ChatGPT架构图 &#xff08;ChatGPT_Diagram.svg来自于【OpenA | Introducing ChatGPT】&#xff09; 2 模型训练 ChatGPT在训练时使用了PPO方法&#xff1b;

pandas空格及网页空格符NBSP替换处理

df3[动作一课程内容]df3[动作一课程内容].str.replace( ,) df3[动作一课程内容]df3[动作一课程内容].str.replace( ,) 截图中代码为python展示代码&#xff0c;由于网页空格符和常规空格符看起来大致相同&#xff0c;但却不能用常规空格替换解决