<div id="name" @click="scrollToViewById('name')"> ...... </div>

  

scrollToViewById(id) {
if (id == '') {
return
}
this.$nextTick(() => {
document.getElementById(id).scrollIntoView({
behavior: "smooth",  // 平滑过渡

block: 'start' // start 上边框  center 中间  end 底部边框 与视窗顶部平齐

});
})
},

  

 // 平滑过渡

vue 根据div id 滚动到指定view到可视视图中的更多相关文章

  1. vue 点击元素滚动到指定位置(滑动到指定位置对应标签自动选中)

    一:各个模块不相同情况 1.内容部分<div class="anchor"> <div v-for="(item,index) in anchors&q ...

  2. Change Field Layout and Visibility in a List View 在列表视图中更改字段布局和可见性

    This lesson will guide you through the steps needed to select columns displayed in the List View. Fo ...

  3. DIV滚动条滚动到指定位置(jquery的position()与offset()方法区别小记)

    相对浏览器,将指定div滚到到指定位置,其用法如下 $("html,body").animate({scrollTop: $(obj).offset().top},speed); ...

  4. iOSCollectioView滚动到指定section的方法

    CollectioView滚动到指定section的方法   项目中的需求:collectionView顶部有一个scrollView组成的标签,点击标签,让collectionView滚动到指定的行 ...

  5. vue项目接口管理,所有接口都在apis文件夹中统一管理

    参考:https://www.codercto.com/a/53432.html 在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,如何定义呢? 方法可能不只一种,本文 ...

  6. Vue列表实现滚动到指定位置样式改变

    这个需求大概是这样子: 我做的一个聊天Demo,在搜索框搜索用户,可以滚动到指定的用户.然后成选中状态. 这是目前状态,我搜索 南宫仆射 ,想要下面的用户列表直接滚动到 南宫仆射 并改变CSS样式. ...

  7. 滚动到指定元素的id处+当元素出现在浏览器显示区域就会自动加载

    //滚动到指定元素的id处 如:$("#Exam82") function Jump() { var scroll_offset = $("#Exam82"). ...

  8. jQuery实现将div中滚动条滚动到指定位置的方法

    1.JS代码: onload = function () { //初始化 scrollToLocation(); }; function scrollToLocation() { var mainCo ...

  9. Android CoordinatorLayout + AppBarLayout(向上滚动隐藏指定的View)

    在新的Android Support Library里面,新增了CoordinatorLayout, AppBarLayout等. 实现的效果: 向下滚动RecylerView,Tab会被隐藏,向上滚 ...

  10. [Vue warn]: Attribute "id" is ignored on component <div> because the component is a fragment instanc

    今天在使用vue框架搭建环境时,遇到这个错误提示: [Vue warn]: Attribute "id" is ignored on component <div> b ...

随机推荐

  1. 复习 - es6语法

    这几天电脑有点问题,一直在弄,而且论文也逼近了也在时间弄那个 ,前面node有一个大项目,已经做完了,我现在是准备把上次复习断下的继续复习一直到这个项目,然后就开始vue了. 1. 首先是函数的一个进 ...

  2. 微服务网关Gateway使用

    为什么需要网关? Gateway网关是我们服务的守门神,所有微服务的统一入口. 网关的核心功能特性 请求路由和负载均衡 一切请求都必须先经过gateway,但网关不处理业务,而是根据某种规则,把请求转 ...

  3. SpringBoot 整合Easy Poi 下载Excel(标题带批注)、导出Excel(带图片)、导入Excel(校验参数,批注导出),附案例源码

    导读 日常开发过程中,经常遇到Excel导入.导出等功能,其中导入逻辑相对麻烦些,还涉及到参数的校验,然后将错误信息批注导出.之前写过EasyExcel导入(参数校验,带批注)(点我直达1.点我直达2 ...

  4. HTB- Archetype

    端口扫描 nmap -sV -sT 10.129.1.1 smbclint smbclient -L 10.129.149.214 获取密码 smbclient //10.129.149.214/ba ...

  5. Webpack3.x升级至 4.x 小记

    近期项目部署遇到点问题,需要升级webpack版本,特此整理一小记,记录升级过程中的依赖包及报错处理. 本次升级的依赖包及对应版本对照表: npm 包 当前版本 升级版本 S/D vue ^2.5.1 ...

  6. 在缩小浏览器宽度的时候,图片会超出li的宽度

    要确保在缩小浏览器宽度时,图片不会超出 <li> 元素的宽度,您可以为描述文本添加一些样式,以便让图片适应于 <li> 元素.一种常见的方法是使用 CSS 中的 max-wid ...

  7. [rCore学习笔记 03]配置rCore开发环境

    写在前面 本随笔是非常菜的菜鸡写的.如有问题请及时提出. 可以联系:1160712160@qq.com GitHhub:https://github.com/WindDevil (目前啥也没有 rCo ...

  8. 使用Git bash切换Gitee、GitHub多个Git账号

    使用Git bash切换Gitee.GitHub多个Git账号 ​ Git是分布式代码管理工具,使用命令行的方式提交commit.revert回滚代码.这里介绍使用Git bash软件来切换Gitee ...

  9. web3的的入口,钱包,为什么说加密钱包是Web 3活动入口

    Web3.0让未来充满了想象力,或许超越当今人类所知的互联网.有可能彻底改变人类社交互动.商业往来和整个互联网经济.同时数字加密货币行业从业者对Web 3.0赋予了很高期待,希望通过结合后打破互联网巨 ...

  10. MIT6.1810の学习笔记

    webliuのmit.6.828学习笔记 写在前面 本文基于mit/6.828课程,附官方网址. 本文采用的实验环境为2020年版的xv6系统,需要wsl,vscode,docker工具.附环境配置教 ...