今天项目碰到一个<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. 【HBase】HBase基本介绍和基础架构

    目录 基本介绍 概述 特点 HBase和Hadoop的关系 RDBMS与HBase的对比 特征 基础架构 基本介绍 概述 HBase是bigtable的开源java版本,是建立在HDFS之上,提供高可 ...

  2. JDBC05 ResultSet结果集

    ResultSet结果集 -Statement执行SQL语句时返回ResultSet结果集 -ResultSet提供的检索不同类型字段的方法,常用的有: getString():获得在数据库里是var ...

  3. Java面试札记

    Java面试札记  在最深的夜里,即使是你的影子也会离你而去. 背景:愿某人在中秋节之前吃上大厂月饼!!!@CDZ 1.Java的八种基本数据类型? 整型:byte.int.short.long: 浮 ...

  4. 散列表PTA判断

    1-1 在散列表中,所谓同义词就是具有相同散列地址的两个元素. (1分) T         F 作者 DS课程组 单位 浙江大学   1-2 采用平方探测冲突解决策略(h​i​​(k)=(H(k)+ ...

  5. 关于SpringBoot的外部化配置使用记录

    关于SpringBoot的外部化配置使用记录 声明: 若有任何纰漏.错误请不吝指出! 记录下使用SpringBoot配置时遇到的一些麻烦,虽然这种麻烦是因为知识匮乏导致的. 记录下避免一段时间后自己又 ...

  6. tp5分页数据

    paginate分页完成之后,生成的分页数据是对象形式存在的,所以如果要调用其分页的数据,比如想要遍历修改数据中的值,等需要进行 foreach操作的地方,需要使用 $re=Db::->tabl ...

  7. 比较接口(Comparable ,Comparator)及流的聚合操作

    Comparable 及 Comparator 的区别 Comparable 一个内比较器,类可以和自己比较 compareTo() 自然比较方法 public interface Comparabl ...

  8. Angular 初体验

    事情起源当初一个简单的截屏然后推流出去的工具,这个工具当初我用winform简单实现了下,然后因公司业余,添加许多程序包,需要自动管理这些程序包,包含下载更新上传等,以及与后台交互,学生老师提醒,自动 ...

  9. 微信小程序跑步计时器

    firstStep:run.wxml <view class="head" style="flex-direction:row;"> <ima ...

  10. 9.3 Go json

    9.3 Go json json是一种轻量级的数据交换格式,易于机器解析,是种key-value格式. JavaScript Object Notation是中种主流的数据格式. json常用于网络传 ...