今天项目碰到一个<vue-scroll >滚动条要回到顶部的需求，查询了好久终于解决了，这里记录一下：

其实就是scrollIntoView()方法的使用（官方文档）：

  1. 需要注意的是要求页面（容器）可滚动时才有用！
  2. 然后要说明的是，这是js原生方法，jquery等框架是使用不了的，所以，获得元素的方法一定是document.getElementById或querySelector，然后才可以点出来scrollIntoView()方法。
  3. 语法：

    element.scrollIntoView（）; // 等同于element.scrollIntoView(true)
    element.scrollIntoView（alignToTop）; //布尔参数
    element.scrollIntoView（scrollIntoViewOptions）; //对象参数

如下附上我的代码：

      

vue 中<vue-scroll >滚动条回到顶部的更多相关文章

  1. vue路由切换时内容组件的滚动条回到顶部

    在使用vue的时候会出现切换路由的时候滚动条保持在原来的位置,要切换路由的时候滚动条回到顶部才有更好的用户体验 1.当页面整体都要滚动到顶部的情况 router.afterEach(() => ...

  2. 一款回到顶部的 jQuery 插件，支持 Div 中的滚动条回到顶部

    前言 今天在网上搜索“回到顶部”的 jQuery 插件,网上有很多,但是大部分都不支持让 Div 中的滚动条回到顶部.于是乎,不放弃,自己参考 Github 上的一个 jQuery 插件,经过自己的修 ...

  3. jQuery滚动条回到顶部或指定位置

    jQuery滚动条回到顶部或指定位置 在很多网站,为了增强用户体验,我们会看到回到顶部的按钮,不用手动拖拽滚动条就能回到顶部,非常方便.下面就介绍用jquery实现的滚动到顶部的代码 $(functi ...

  4. jacascript 滚动 scroll 与回到顶部

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 滚动 scroll scrollHeight 表示元素的总高度,包括由于溢出而无法展示在网页的不可见部分: ...

  5. vue中使用better-scroll滚动条插件

    应用场景: overflow: hidden会让超出的部分隐藏,并且无法拖拽,所以可使用插件让长列表限定的区域滚动拖拽. 参考:https://zhuanlan.zhihu.com/p/2740702 ...

  6. Vue中vue.config的配置

    vue-cli 3.x 脚手架搭建完成后,项目目录中没有 vue.config.js 文件,需要手动在根目录中创建 vue.config.js. vue.config.js 是一个可选的配置文件,如果 ...

  7. vue中 Vue.set 的使用

    Vue.set(vm.items, indexOfItem, newValue) 1.vm.items :源数据:2.indexOfItem : 要修改的数据的键3.newValue : 要修改的数据 ...

  8. vue开发 回到顶部操作

    第一种:使用vue-router history 模式下,用scrollBehavior 方法实现. 1 export default new Router({ 2 mode: 'history', ...

  9. vue中修改滚动条样式

    这是一个在VUE中的设置滚动条样式的方法,该方法只适用于Chrome浏览器,亲测在火狐不适用 样式写在 APP.vue 中,可以用在全局,如果只用在那个盒子中,只需要在::前面加上盒子的class名就 ...

随机推荐

  1. spring学习笔记（四）我对spring中bean生命周期的理解

    我相信大部分同学对spring中bean的生命周期都不陌生,但是如果要详细的说出每一个步骤,可能能说出来的也不多,我之前也是这样,前几天调了一下spring的源码,看了一点书,突然一下明朗了,理解了s ...

  2. Coursera课程笔记----计算导论与C语言基础----Week 3

    存储程序式计算机 冯·诺伊曼式计算机 "关于EDVAC的报告草案" 组成:控制器(协调工作).运算器(算数&逻辑运算).存储器(存储操作信息和中间结果).输入设备.输出设备 ...

  3. MySQL 主从复制原理及过程讲解

    mysql主从原理描述,摘自老男孩. 下面简 单描述下 MySQL Replication 复制的原理及过程 . 1.在 Slave 服务器上执行 start slave 命令开启主从复制开关,主从复 ...

  4. 业务系统请求zabbix图表性能调优

    性能调优实践 性能调优实践 背景 问题分析 后端优化排查 前端优化排查 后端长响应排查 zabbix server 优化 总结 背景 用 vue.js 的框架 ant-design vue pro 实 ...

  5. 解决Eclipse添加新server时无法选择Tomcat7.0

    新添加tomcat时 出现如下图情况: 解决方法:这时打开工作空间目录下的.metadata\.plugins\org.eclipse.core.runtime\.settings文件夹,删除org. ...

  6. CODING 敏捷实战系列课第三讲：可视化业务分析

    业务分析处在开发过程的上游,提高业务分析的质量,可以减少后续开发.测试和集成过程中的反复确认,场景遗漏.采用可视化的业务分析工具箱可以大幅度避免文字版的业务需求描述所带来的不够完整,有误解等问题.CO ...

  7. vscode+eslint自动格式化vue代码的方法

    前言 使用vscode开发vue项目的时候,为了编码格式的统一化,使用eslint规范进行格式化.此时通过eslint插件可以实现对vue代码的自动格式化. 使用方式 在vscode的插件模块处,搜索 ...

  8. 手机网页，div内滚动条，以及div内部滚动条拉到底部之后触发事件

    var gao = document.documentElement.clientHeight; var headHeight = parseInt($('.yhead').css('height') ...

  9. java ->Servlet接口

    JavaWeb核心之Servlet Servlet简介 什么是Servlet(控制器的作用) Servlet 运行在服务端的Java小程序,是sun公司提供一套规范(接口),用来处理客户端请求.响应给 ...

  10. JQuery踩过的坑，遇到就记下

    1 乱用选择器 坑人指数:200 JQuery选择器调用代价很大,反复调用效率更低.应采用缓存对象的方法或采用链式调用的方式. //错误的写法 $("#button").click ...