今天项目碰到一个<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学习笔记（七）HttpMessageConverter

    spring学习笔记(七)HttpMessageConverter 1. HttpMessageConverter的加载 2. 从StringMessageConverter探究消息转换器的原理 1. ...

  2. LeetCode--Array--Container With Most Water (Medium)

    11. Container With Most Water (Medium)# Given n non-negative integers a1, a2, ..., an , where each r ...

  3. {path：“ /”，expires：7}这一段是什么意思？

    1.创建会话cookie: $ .cookie('name','value'); 2.创建到期的cookie,然后7天: $ .cookie('name','value',{到期日:7}); 3.创建 ...

  4. Zkeys：低门槛、易操作的智能云管理系统

    ZKEYS系统是一个功能强大的智能化管理系统,目前国内最大的IDC业务管理系统之一.功能模块涵盖用户中心系统.财务系统.工单系统.备案系统和云服务器.服务托管器.虚拟主机等产品的弹性在线购买及及时开通 ...

  5. 1、Fiddler基础

    1.抓取https请求 前言 fiddler是一个很好的抓包工具,默认是抓http请求的,对于pc上的https请求,会提示网页不安全,这时候需要在浏览器上安装证书. 一.网页不安全 1.用fiddl ...

  6. watch 和 计算属性

    作者:纵横链接:https://www.zhihu.com/question/55846720/answer/331760496来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  7. nginx均衡负载

    一直在担心session 问题,结果试了2个web 论坛,discuz 和phpbb ,前面用nginx 均衡负载,后端是apache httpd +php ,mysql 用同一个,修改一下confi ...

  8. Python列表,元组,字典,字符串方法笔记

    01. 列表 1.1 列表的定义 List(列表) 是 Python 中使用 最频繁 的数据类型,在其他语言中通常叫做 数组 专门用于存储 一串 信息 列表用 [] 定义,数据 之间使用 , 分隔 列 ...

  9. 情人节闷在家里做画（ 安卓统计图MPAndroidChart开发 ）

    有些时候觉得一个人挺好的,可以更自由安排自己的时间: 有些时候觉得有个人挺好的,很多事情一个人做起来太没意思了,纵使心中澎湃,倾听的独有自己. 废话少说,直接上图 MPAndroidChart是啥 一 ...

  10. Java 解决采集UTF-8网页空格变成问号乱码

    http://blog.csdn.net/bob007/article/details/27098875 使用此方法转换后,在列表中看到的正常,但是在详情页的文本框中查看到的就是 了,只好过滤掉所有的 ...