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

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

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

在这里插入图片描述

html代码

  <a-icontype="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.mzph.cn/news/212143.shtml

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

相关文章

令牌桶算法理解学习(限流算法)

令牌桶算法是网络流量整形&#xff08;Traffic Shaping&#xff09;和速率限制&#xff08;Rate Limiting&#xff09;中最常使用的一种算法。典型情况下&#xff0c;令牌桶算法用来控制发送到网络上的数据的数目&#xff0c;并允许突发数据的发送。 用简单的话语来说就是限制…

Linux中的SNAT与DNAT实践

Linux中的SNAT与DNAT实践 1、SNAT的介绍1.1&#xff0c;SNAT概述1.2&#xff0c;SNAT源地址转换过程1.3&#xff0c;SNAT转换 2、DNAT的介绍2.1&#xff0c;DNAT概述2.2&#xff0c;DNAT转换前提条件2.3&#xff0c;DNAT的转换 3、防火墙规则的备份和还原4、tcpdump抓包工具的运…

腾讯再推互动微短剧,游戏的风吹向了短剧

当你看剧时不再拥有上帝视角&#xff0c;处在女主的位置上&#xff0c;你又会做出什么样的选择&#xff1f; 腾讯最新上线的短剧《摩玉玄奇2》在原版之外还推出了互动版&#xff0c;就给出了这样一个新玩法。 《摩玉玄奇2》原版是普通的后宫职场微短剧&#xff0c;互动版则是…

虚拟机VMware安装centos以及配置网络

目录 1、CentOS7的下载2、CentOS7的配置3、CentOS7的安装4、CentOS7的网络配置 4.1、自动获取IP4.2、固定获取IP 5、XShell连接CentO 准备工作&#xff1a;提前下载和安装好VMware。VMware的安装可以参考这一篇文章&#xff1a;VMware15的下载及安装教程。 1、CentOS7的下载 …

从零开始搭建企业管理系统(五):统一响应结果和全局异常处理

统一响应结果和全局异常处理 前言统一响应结果定义响应结构定义响应对象定义响应状态对象统一返回响应对象定义 Controller 拦截类 全局异常处理 前言 做个功能之前我们想一下为什么要做统一响应结果和全局异常处理呢&#xff1f; 这是因为我们的项目采用的是前后端分离开发&am…

LVGL | Demo实例使用说明

LVGL | Demo实例使用说明 时间&#xff1a;2023年12月10日21:51:17 文章目录 LVGL | Demo实例使用说明Demos for LVGLAdd the examples to your projectsDemosWidgetsMusic playerKeypad and encoderBenchmarkStress Contributing Demos for LVGL Add the examples to your p…

基于SSM的酒店管理旅店系统(Java毕业设计)

大家好&#xff0c;我是DeBug&#xff0c;很高兴你能来阅读&#xff01;作为一名热爱编程的程序员&#xff0c;我希望通过这些教学笔记与大家分享我的编程经验和知识。在这里&#xff0c;我将会结合实际项目经验&#xff0c;分享编程技巧、最佳实践以及解决问题的方法。无论你是…

【软件测试】年薪30万跟年薪15万的面试有些什么区别?

1、什么是兼容性测试&#xff1f;兼容性测试侧重哪些方面&#xff1f; 参考答案&#xff1a; 兼容测试主要是检查软件在不同的硬件平台、软件平台上是否可以正常的运行&#xff0c;即是通常说的软件的可移植性。 兼容的类型&#xff0c;如果细分的话&#xff0c;有平台的兼容…

Numpy数组中数据的排序【sort(),argsort()与 lexsort()】 (第13讲)

Numpy数组中数据的排序【sort(),argsort()与 lexsort()】 (第13讲)         🍹博主 侯小啾 感谢您的支持与信赖。☀️ 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔…

【C++ 程序设计入门基础】- 第3节-循环结构02

目录 while 语句 案例 while 循环 输入一个整数 n &#xff0c;输出 1~n 的所有整数。 查看运行结果&#xff1a; while 语句结构解析 do while 语句 案例 do while 循环 输入一个整数n&#xff0c;输出1&#xff5e;n的所有整数。 查看运行结果 while、do while的区别 …

SpringSecurity6 | 登录成功后的JSON处理

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; Java从入门到精通 ✨特色专栏&#xf…

Android:java.lang.SecurityException: Provider must not be exporte

java.lang.SecurityException: Provider must not be exporte 解决方案 首先在AndroidManifest.xml中添加provider android:authorities&#xff1a; 是用来标识provider的唯一标识&#xff0c;在同一部手机上一个"authority"串只能被一个app使用&#xff0c;冲突的话…

架构LNMP

目录 1.安装Nginx服务 2.安装 MySQL 服务 3.安装配置 PHP 解析环境 4.部署 Discuz&#xff01;社区论坛 Web 应用 1.安装Nginx服务 实验准备 systemctl stop firewalld systemctl disable firewalld setenforce 0 安装依赖包 yum -y install pcre-devel zlib-devel gcc…

Jmeter测试实践:文件下载接口

一 Jmeter步骤 1.打开jmeter4.0&#xff0c;新建测试计划&#xff0c;添加线程组。根据实际情况配置线程属性。 2.添加HTTP请求。根据接口文档进行配置。 Basic部分修改如下&#xff0c;Advanced部分保持默认。这里的参数id是文件的id&#xff0c;我进行了参数化&#xff0c…

Redis哨兵(sentinel)

文章目录 简介搭建框架具体步骤主要文件参数开始配置 案例分析原有的master挂了 哨兵运行流程和选举原理主观下线客观下线(Objectively Down)选举出领导者哨兵(哨兵中选出兵王) 选新的master使用建议 简介 将某一个从库转换为新主库&#xff0c;继续对外服务将某一个从库转换为…

Java - HashMap

数组和链表 数组&#xff1a; 存储区间是连续&#xff0c;且占用内存严重&#xff0c;空间复杂也很大&#xff0c;时间复杂为O&#xff08;1&#xff09; 优点&#xff1a;是随机读取效率很高&#xff0c;原因数组是连续&#xff08;随机访问性强&#xff0c;查找速度快&#x…

Qt6.5类库实例大全:Qt Creator快速入门

哈喽大家好&#xff0c;我是20YC编程小二&#xff01;扫码关注公众号&#xff0c;现在可免费领取《C程序员》在线视频教程哦&#xff01;#下面开始今天内容# 1. Qt Creator介绍 Qt Creator是一个轻量级的跨平台集成开发环境(IDE)&#xff0c;专为使用Qt框架进行应用程序开发而…

NAND闪存市场2023年Q3增长2.9%,Q4有望激增20%

TrendForce报告显示&#xff0c;NAND闪存市场在2023年第三季度出现了关键转折&#xff0c;主要由三星的战略性减产决定驱动。最初&#xff0c;市场对终端用户需求的不确定性以及对平淡旺季的担忧导致买家采取保守的方法&#xff0c;库存低、采购慢。然而&#xff0c;随着三星等…

华为新款笔记本搭载5nm麒麟芯片,来源成谜,可能让大家失望了~

近日&#xff0c;华为公司悄悄推出了一款基于国产技术打造的全新商用笔记本——华为擎云L540。目前&#xff0c;华为擎云L540在京东平台悄然上线的&#xff0c;尚未在华为官方渠道公开售卖。华为擎云L540搭载了麒麟9006C处理器&#xff0c;采用先进的5nm制程工艺&#xff0c;8 …

openGauss学习笔记-150 openGauss 数据库运维-备份与恢复-物理备份与恢复之gs_backup

文章目录 openGauss学习笔记-150 openGauss 数据库运维-备份与恢复-物理备份与恢复之gs_backup150.1 背景信息150.2 前提条件150.3 语法150.4 参数说明150.5 示例 openGauss学习笔记-150 openGauss 数据库运维-备份与恢复-物理备份与恢复之gs_backup 150.1 背景信息 openGaus…