Vue项目页面回到顶部

实现的方法：

一、借助element-plus框架的Backtop回到顶部组件（点击按钮缓慢回顶部）

注意：这个组件想显示出来，必须放到产生滚动效果的元素内部，且是放到最上面！所以必须明确是哪个元素有的滚动条（也许不是body元素）

二、借助js的api ：scrollTop

同样要明确哪个元素有的滚动条，若直接是页面文档、或者body元素产生的滚动，则：

document.body.scrollTop =document.documentElement.scrollTop=0;

若是其他设定的元素产生的滚动，则需要先获取到这个元素：

（假如这里是有个类名叫content-view的元素产生的滚动）

  let content = document.querySelector('.content-view') content.scrollTop = 0;

注意：利用api回到顶部是没有滚动动画的，直接一下就到了

Vue项目页面回到顶部相关推荐

vue项目实现回到顶部的两种超简单方法
vue 中实现回到顶部的两种方式: (1)锚点方式通过点击锚点回到指定位置: <template><div id="topAnchor" ref="f ...
基于Vue项目的回到顶部插件
在形目中经常要实现回到顶部的效果,所以我在这做了一个回到顶部的插件. 首先,我们先在这说明一下,实现回到顶部的效果所要满足的要求为:要实现回到顶部效果的盒子必须出现横向滚动条. 子组件如下所示: 原理 ...
js——页面回到顶部
很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子--页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享-- <!DOCTYPE html&g ...
vue刷新页面回到首页
记录一下,实现项目中的小需求,刷新页面回到首页在App.vue中添加如下代码即可在created函数中判断当前路由地址是否在首页home,如果不在则替换为home页面 created() {if ...
vue项目页面跳转的常用方法
1.页面跳转的几种方法 1:router-link跳转 2:this.$router.push() 3:this.$router.replace() 4:this.$router.go(n) 1. r ...
HTML点击元素页面回到顶部,博客园页面添加返回顶部 TOP 按钮
博客园页面添加返回顶部 TOP 按钮 TOP 按钮进入网页管理 -> 设置在 "页面定制 CSS 代码" 中添加如下 CSS 样式, 当然你可以改为自己喜欢的样式此处可 ...
vue 项目页面增加水印
在指定容器中添加水印,可不设置容器,则添加在整个页面中 1.waterMark.js文件 'use strict'const watermark = {}/**** @param {要设置的水印的内容 ...
微信PC版访问本地vue项目页面调试及访问空白问题
1.安装微信旧版本2.6 链接:https://pan.baidu.com/s/15no5HCjxydYBa4YB_nvo1g 提取码:pntg 2. 微信引入devtool包第 1 步:查看微信 ...
通过webpack配置vue项目页面title
vue 项目创建之后,在index.htm里面的title,使用 htmlWebpackPlugin.options.title 进行的展示. 调整 webpack 配置最简单的方式就是在 vue.c ...

Vue项目页面回到顶部

Vue项目页面回到顶部相关推荐

最新文章

热门文章