今天项目碰到一个<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. c#一些常用知识点

    UID自动生成随机数 UID.Text = Guid.NewGuid().ToString(); GridView中常用格式化公式 <asp:BoundField DataField=" ...

  2. HTTPS简单介绍

    在HTTP协议中有可能存在信息窃听或者身份伪装等问题,使用HTTPS协议通信机制可以有效地防止这些问题. 1 HTTP协议的缺点 通信使用明文,内容可能被窃听 不用验证通信方的身份,因此可能会遭遇伪装 ...

  3. 【Hadoop离线基础总结】linux的shell编程

    linux的shell编程 基本了解 概述 Shell是一个用C语言编写的程序,通过shell用户可以访问操作系统内核服务,它类似于DOS下的command和后来的cmd.exe.Shell既是一种命 ...

  4. STM32 CubeIDE快速创建工程（图文详解）

    使用STM32CubeIDE快速创建STM32的HAL库工程. 文章目录 1 STM32CubeIDE Home 2 生成工程 3 程序下载 1 STM32CubeIDE Home 进入到官网的下载界 ...

  5. jbpm4 泳道

    今天刚学习了jbpm4的泳道使用,方便以后查阅记录一下! 泳道定义: <swimlane name="myswim" assignee="userC"&g ...

  6. GitHub 热点速览 Vol.20：VSCode 插件全家桶新增画图小能手

    作者:HelloGitHub-小鱼干 摘要:后浪,这个五月热词用来概括 GitHub 本周热点无疑是最佳词汇.Deno 这个 Node.js 作者制造出来的后浪,掀起了 GitHub Trending ...

  7. Jenkins 插件 Role Strategy Plugin 使用

    Manage and Assign Roles 1. Manage Roles Global Role 在此处,我们划分了四种权限,分别为: admin:超级管理员角色,管理整个服务: devops: ...

  8. html,body设置高度100%后底部有空白的bug

    html,body{ //... height:100% } #app{ //... } #footbar{ position:absolute;bottom:0px;left:0px;right:0 ...

  9. css3弹性布局

    二.弹性布局(重点******************************************) 1.什么是弹性布局 弹性布局,是一种布局方式. 主要解决的是某个元素中子元素的布局方式 让页面 ...

  10. 数据结构----双端队列Dque

    双端队列的概念与数据结构 deque(也称为双端队列)是与队列类似的项的有序集合.它有两个端部,首部和尾部,并且项在集合中保持不变. deque 特殊之处在于添加和删除项是非限制性的.可以在前面或后面 ...