vue 中<vue-scroll >滚动条回到顶部
今天项目碰到一个<vue-scroll >滚动条要回到顶部的需求,查询了好久终于解决了,这里记录一下:
其实就是scrollIntoView()方法的使用(官方文档):
- 需要注意的是要求页面(容器)可滚动时才有用!
- 然后要说明的是,这是js原生方法,jquery等框架是使用不了的,所以,获得元素的方法一定是document.getElementById或querySelector,然后才可以点出来scrollIntoView()方法。
- 语法:
element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); //布尔参数
element.scrollIntoView(scrollIntoViewOptions); //对象参数
如下附上我的代码:

vue 中<vue-scroll >滚动条回到顶部的更多相关文章
- vue路由切换时内容组件的滚动条回到顶部
在使用vue的时候会出现切换路由的时候滚动条保持在原来的位置,要切换路由的时候滚动条回到顶部才有更好的用户体验 1.当页面整体都要滚动到顶部的情况 router.afterEach(() => ...
- 一款回到顶部的 jQuery 插件,支持 Div 中的滚动条回到顶部
前言 今天在网上搜索“回到顶部”的 jQuery 插件,网上有很多,但是大部分都不支持让 Div 中的滚动条回到顶部.于是乎,不放弃,自己参考 Github 上的一个 jQuery 插件,经过自己的修 ...
- jQuery滚动条回到顶部或指定位置
jQuery滚动条回到顶部或指定位置 在很多网站,为了增强用户体验,我们会看到回到顶部的按钮,不用手动拖拽滚动条就能回到顶部,非常方便.下面就介绍用jquery实现的滚动到顶部的代码 $(functi ...
- jacascript 滚动 scroll 与回到顶部
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 滚动 scroll scrollHeight 表示元素的总高度,包括由于溢出而无法展示在网页的不可见部分: ...
- vue中使用better-scroll滚动条插件
应用场景: overflow: hidden会让超出的部分隐藏,并且无法拖拽,所以可使用插件让长列表限定的区域滚动拖拽. 参考:https://zhuanlan.zhihu.com/p/2740702 ...
- Vue中vue.config的配置
vue-cli 3.x 脚手架搭建完成后,项目目录中没有 vue.config.js 文件,需要手动在根目录中创建 vue.config.js. vue.config.js 是一个可选的配置文件,如果 ...
- vue中 Vue.set 的使用
Vue.set(vm.items, indexOfItem, newValue) 1.vm.items :源数据:2.indexOfItem : 要修改的数据的键3.newValue : 要修改的数据 ...
- vue开发 回到顶部操作
第一种:使用vue-router history 模式下,用scrollBehavior 方法实现. 1 export default new Router({ 2 mode: 'history', ...
- vue中修改滚动条样式
这是一个在VUE中的设置滚动条样式的方法,该方法只适用于Chrome浏览器,亲测在火狐不适用 样式写在 APP.vue 中,可以用在全局,如果只用在那个盒子中,只需要在::前面加上盒子的class名就 ...
随机推荐
- 这么多Linux版本,你究竟该怎么选择?
Linux有非常多的版本,比如世面上常见的有 Ubuntu.RedHat.Fedora.Centos等等,这么多的版本我们究竟该选哪一个呢?今天我带大家对各个版本进行一下分析和比较,帮助大家来做出更好 ...
- Apache Hudi又双叕被国内顶级云服务提供商集成了!
是的,最近国内云服务提供商腾讯云在其EMR-V2.2.0版本中优先集成了Hudi 0.5.1版本作为其云上的数据湖解决方案对外提供服务 Apache Hudi 在 HDFS 的数据集上提供了插入更新和 ...
- Linux下安装JDK11
Linux下安装JDK11 Linux下安装JDK可分为三步: 下载相应版本的压缩包 解压缩并移置相应目录 配置环境变量 验证结果 一.下载相应版本的压缩包 下载压缩包可以通过官网下载,如图: 下载前 ...
- 格式转换工具:使用kgEncode转换压缩无损音乐
在kugou安装目录下,有kgEncode目录,可以在各种格式中相互转换
- bcdedit 替代easybcd 编辑grub
bcdedit这个命令是win7下,继续安装xubuntu时遇到的.当时xubuntu的语言设置为en-us,时区改为HK,可是仍有很多不太适应的地方.于是,删了xubuntu,重装它.同时,grub ...
- Linux系统中如何升级pip
问题提出:在Linux系统下安装python的logging库时提示以下信息 经过一番折腾,定位在pip版本过低和setuptools版本过低上 一.Linux下更新包 sudo python3 -m ...
- ORACLE 统计文件后缀SQL
ORACLE 统计文件后缀SQL查询语句 select lower(substr(file_name,instr(file_name, '.', -1),length(file_name))),cou ...
- Java集合类: Set、List、Map
Set.List.Map都是集合接口 set --其中的值不允许重复,无序的数据结构 list --其中的值允许重复,因为其为有序的数据结构 map--成对的数据结构,健值必须具有唯一 ...
- 【python----发轫之始】【基础知识总结】
python基础知识总结 一.自学感受 学完之后,,,感觉脑子里全是乱的,单词这么多,都要分不清什么时候该用什么,他到底属于哪一个数据类型里的函数,,,,,, 所以,我想着把笔记整理一下,方便自己和需 ...
- 201771010117马兴德 实验二 Java基本程序设计(1)
实验二 Java基本程序设计(1) 第一部分 理论知识的学习. 第三章Java基本程序设计结构 1 基本知识: (1)标识符:标识符由字母.下划线.美元符号和数字组成,且第一个符号不能为数字 ...