vue3点击返回顶部

// 点击返回顶部

```
// 1. 要在heml 写一个 返回的按钮或者图标，然后定位到页面上// 2. 在定义一个状态， 稍后用于判断是否让这个图标返回上面// 3. 在滚动盒子上添加一个 事件   @scroll 事件        // 必须是要添加在滚动盒子上！！！// 4. 在下面调用这个函数// 5. 因为要写返回顶部，所以需要在这上面let
// 5. 返回顶部，首先是找到目标元素，e.target，然后给目标元素设置 滚动高度e.target.scrollTop = 0，但是事件对象是在 ‘e’ 中的，所以，要在上面记录一个let dom = null; // 定义全局的变量，来记录滚动盒子的dom元素let num = e.target// let num = 0;     // 滚动盒子的高度   // 点击返回顶部加个动画版// e 是事件对象，这里需要传这个参数const scroll =(e)=>{//    e.target 滚动盒子      // e.target.scrollTop 滚动条距离顶部的距离let num = e.target.scrollTopconsole.log(e.target.scrollTop);// 3.判断一下，滑动的距离到多少if (num > 400) {data.showBack = true;    // 大于400，就显示} else {data.showBack = false;   // 小于400，就隐藏}}// 6.回到顶部const goTop = () => {// 只需要把上面定义的滚动盒子的高度 = 0就可以了dom.scrollTop = 0};//  7.回到顶部 加个动画const goTop = () => {// 定义一个 定时器let time = setInterval(() => {// 如果 ，滚动的高度是小于定于0 ，就清除定时器if (num <= 0) {clearInterval(time); // 清空} else {        // 否则，就让滚动盒子的高度--num = num - 50;// num--dom.scrollTop = num; // 让滚动盒子的高度= 0}}, 10);};

 如：<template>// home是最大的父盒子<div class="home"><app-header></app-header>// count 是内容的滚动盒子 ，给他加  @scroll 事件<div class="count" @scroll="scroll"><app-list :appList="showList"></app-list></div>// 添加的这个点击返回顶部的这个图标，用定位固定到页面上          // v-show="showBack"  当他的状态比如处于false的时候，让他显示     // 添加一个点击事件，回到顶部<i class="iconfont icon-fanhuidingbu" v-show="showBack" @click="goTop" ></i></div></template>setup(props) {const data = reactive({showBack: false, //是否回到顶部        // 定义一个状态});}// 点击返回顶部  的距离let dom = null;  // 定义全局的变量，来记录滚动盒子的dom元素let num = 0;     // 滚动盒子的高度const scroll = (e) => {     // e 是事件对象num = e.target.scrollTop;        // 滚动条距离顶部的距离dom = e.target;     // 滚动盒子if (num > 400) {data.showBack = true;        // 大于400，就显示} else {data.showBack = false;         // 小于400，就隐藏}};// 回到顶部const goTop = () => {// dom.scrollTop = 0let time = setInterval(() => {if (num <= 0) {clearInterval(time); // 清空} else {num = num - 5;dom.scrollTop = num;}}, 10);};
```点击返回顶部,有一个是使用vant组件的时候,再写返回顶部,会不好写,需要获取节点

vue3点击返回顶部相关推荐

android 按钮点击返回顶部,微信浏览器点击系统返回，安卓返回会重载页面回到页面顶部，iOS则返回则会保留之前浏览位置的解决方法...
后续补我框好串端题近还架比作和和近还架比作和和充: 页面css设置了height: 100%,来避免使用fixed定位弹窗引起的部分机型兼容问题,因此会在返回的时候回到页面顶部,补充解决办法: 在弹窗 ...
android 点击返回顶部,Android scrollToTop实现点击回到顶部（兼容PullTorefreshScrollview）...
前言最近因为项目组需求,特研究了一下"回到顶部"效果,即:页面里有scrollview,内容很多,当滑动到页面下面或者更深时,需要回到顶部,即可点击出现的按钮,省得回滑N久.我没 ...
网页中返回顶部代码(多种方法)另附注释说明
下面就说下简单的返回顶部效果的代码实现,附注释说明,最简单的静态返回顶部,点击直接跳转页面顶部及用js模拟滚动效果上滑至顶部下面就说下简单的返回顶部效果的代码实现,附注释说明. 1. 最简单的静态返 ...
jquery 实现返回顶部功能
1. html 中添加一个返回顶部的按钮,本例中采用了一个绝对定位的div,(position:fixed),背景色给了一定的透明度,并加入一个向上的箭头icon. 2. 绑定window 的scro ...
页面返回顶部（方法比较）
下面就说下简单的返回顶部效果的代码实现,附注释说明. 1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能方法一:用命名锚点击返回到顶部预设的id为top的元素 h ...
返回顶部：js代码篇
代码篇: 地址:jQuery scroll()方法:页面滚动到一定位置触发事件返回顶部我们监听滚动事件,放滚动到 400px 时,出发显示返回顶部标签,然后给该标签,绑定一个事件,点击返回顶部. H ...
zepto返回顶部动画
点击返回顶部 function goTop(acceleration, time) {acceleration = acceleration || 0.1;time = time || 16;var ...
纯CSS实现返回顶部的功能
下面是 css 锚点跳转的一个例子: <style>#page-1 {width: 100%;height: 800px;background: red;font-size: 120px; ...
“返回顶部”的简易代码及设计理念
1.介绍及思路分析: 在很多公司的网站中,鼠标滚动一定高度(以150px为例)之后,会出现"返回顶部"的标签. "返回顶部"标签被固定到窗口的指定位置,位置始终 ...

vue3点击返回顶部

vue3点击返回顶部相关推荐

最新文章

热门文章