今天项目碰到一个<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. 【Spark】RDD(Resilient Distributed Dataset)究竟是什么？

    目录 基本概念 官方文档 概述 含义 RDD出现的原因 五大属性 以单词统计为例,一张图熟悉RDD当中的五大属性 解构图 RDD弹性 RDD特点 分区 只读 依赖 缓存 checkpoint 基本概念 ...

  2. Linux内核驱动学习（二）添加自定义菜单到内核源码menuconfig

    文章目录 目标 drivers/Kconfig demo下的Kconfig 和 Makefile Kconfig Makefile demo_gpio.c 目标 Kernel:Linux 4.4 我编 ...

  3. 蓝桥杯备战（一）3n+1问题

    [问题描述] 考虑如下的序列生成算法:从整数 n 开始,如果 n 是偶数,把它除以 2:如果 n 是奇数,把它乘 3 加1.用新得到的值重复上述步骤,直到 n = 1 时停止.例如,n = 22 时该 ...

  4. JAVA实现拼手气红包算法

    实现拼手气红包算法,有以下几个需要注意的地方: 抢红包的期望收益应与先后顺序无关 保证每个用户至少能抢到一个预设的最小金额,人民币红包设置的最小金额一般是0.01元,如果需要发其他货币类型的红包,比如 ...

  5. security安全框架，用户登录安全认证与退出

    一.创建用户表及实体类 二.编写security配置文件 <?xml version="1.0" encoding="UTF-8"?><bea ...

  6. nginx安装目录文件

    nginx安装目录 conf 存放nginx的配置文件 在修改配置文件nginx.conf之前,一般先备份cp nginx.conf nginx.conf.bak html 存放前端文件的 默认带有首 ...

  7. Java基础知识面试题及答案-整理

    1.String类可以被继承吗?  不能.String类在声明中使用final关键字修饰符.使用final关键字修饰的类无法被继承. Java语言的开发者为什么要将String类定义为final类呢? ...

  8. JavaScript编程入门

    写在前面: 不管容易还是简单 总要尝试才知道答案     1.JavaScript初探   JavaScript:轻量级脚本语言,是可插入HTML页面的编程代码. 将JavaScript插入HTML页 ...

  9. Java效率工具Lombok使用与原理

    Java效率工具Lombok使用与原理 我个人觉得 Lombok是一个优化Java代码以及提升开发效率不错的工具.Lombok 的Github地址为:https://github.com/rzwits ...

  10. JedisPool的使用-连接池

    为什么要使用JedisPool 1,获取Jedis实例需要从JedisPool中获取 2,用完Jedis实例需要返还给JedisPool 3,如果Jedis在使用过程中出错,则也需要还给JedisPo ...