今天项目碰到一个<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. mybatis与hibernate运行流程比较

    hibernate长时间没用,感觉生疏了,正好借这篇文章整合下知识,顺便复习比较下两种框架. 概述: Mybatis和hibernate不同,它不完全是一个ORM框架,因为MyBatis需要程序员自己 ...

  2. 【Spark】使用java语言开发spark程序

    目录 步骤 一.创建maven工程,导入jar包 二.开发代码 步骤 一.创建maven工程,导入jar包 <properties> <scala.version>2.11.8 ...

  3. 大技霸教你远程执行Linux脚本和命令

    如果现在需要在 Linux 服务器上执行一系列命令(比如搭建 LNMP 环境)我应该会第一时间想到想办法写个 Shell 脚本,然后扔上去执行以下看看结果. 然而一贯懒惰的我并不想这么去执行 Shel ...

  4. 「雕爷学编程」Arduino动手做(22)——8X8 LED点阵MAX7219屏

    37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里 ...

  5. day06:三级菜单练习0218

    #1:省份数列:data = { "北京":{ "昌平":{ "沙河":["oldboy","电信" ...

  6. js中获取 table节点各tr及td的内容方法

    js中获取 table节点各tr及td的内容方法 分类: java基础2013-10-12 17:54 1055人阅读 评论(0) 收藏 举报 <table id="tb1" ...

  7. LA3942 Remember the Word

    题目链接:https://vjudge.net/problem/UVALive-3942 本篇是刘汝佳<算法竞赛入门经典——训练指南>的读书笔记(复述),详见原书 \(P209\) . 解 ...

  8. PHP持久配置容器Yaconf

    PHP持久配置容器Yaconf的安装及使用 Yaconf介绍:Yaconf是一个配置容器,它解析ini文件,在PHP启动时将结果存储在PHP中,配置存在于整个PHP生命周期中,这使得它非常快. 要求: ...

  9. #442-Find All Duplicates in an Array-数组中重复的数字

    一.题目 给定一个整数数组 a,其中1 ≤ a[i] ≤ n (n为数组长度), 其中有些元素出现两次而其他元素出现一次. 找到所有出现两次的元素. 你可以不用到任何额外空间并在O(n)时间复杂度内解 ...

  10. cp: 无法创建普通文件 : 文件已存在

    背景 碰到一个偶现的编译出错问题,如图 报错的信息是 cp: 无法创建普通文件"xxx": 文件已存在 排查原因 看了下 Makefile,这句非常简单,就是 cp ./xxx . ...