今天项目碰到一个<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. 1、Hbase原理分析

    一.Hbase介绍 1.1.对Hbase的认识 HBase作为面向列的数据库运行在HDFS之上,HDFS缺乏随机读写操作,HBase正是为此而出现. HBase参考 Google 的 Bigtable ...

  2. c++(qt)程序员微信群

    关注微信公众号"程序员成长日志",回复关键字"c++"扫码进群 本群主要为大家解决工作中遇到的问题遇到的问题发到群里大家集思广益平时可以瞎扯不定期红包

  3. 模板引擎 Thymeleaf 动态渲染 HTML

    1.添加依赖 <!-- Thymeleaf 模板引擎 --> <dependency> <groupId>org.thymeleaf</groupId> ...

  4. Android广播机制(1)

    目录 简介 发送广播和接收广播方式 广播类型 接收系统广播 动态注册监听网络变化 步骤 优化 静态注册实现开机启动 步骤 注意 简介 就是因为安卓中的每个应用程序都可以对自己感兴趣的广播进行注册,这样 ...

  5. js--bom对象

    bom:browser object model **navigator:获取浏览器的信息 **screen:获取屏幕的相关信息 **location:请求的url地址 **获取请求的url地址:lo ...

  6. [zoj3623]背包模型

    给定n种物品,每种物品需要ti时间生产出来,生产出来以后,每单位时间可以创造wi个价值.如果需要创造至少W个价值,求最少时间. 思路:dp[j]表示用时间j所能创造的最大价值,则有转移方程:dp[j ...

  7. C# 集合ArrayList ：可以存储任何类型的数组，的基本用法

    public void main() { //可以存储任何类型的数组 ArrayList alist = new ArrayList(); AddData(alist); RemoveData(ali ...

  8. mybatis collection的使用

    Mybatis collection的使用 今天学习了mybatis中的collection使用,作为记录以后使用.首先看一下javabean的结构! public class Article {   ...

  9. dokcer入门

    背景: 由于最近在做基于Headless chrome + Robotframework + Docker +Jenkins架构的web自动化测试的预研工作,其中涉及到web自动化持续集成,需要搭建自 ...

  10. kafka消费者重试逻辑的实现

    背景 在kafka的消费者中,如果消费某条消息出错,会导致该条消息不会被ack,该消息会被不断的重试,阻塞该分区的其他消息的消费,因此,为了保证消息队列不被阻塞,在出现异常的情况下,我们一般还是会ac ...