<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. 数据结构—包(Bag)

    数据结构中的包,其实是对现实中的包的一种抽象. 想像一下现实中的包,比如书包,它能做什么?有哪些功能?首先它用来装东西,里面的东西可以随便放,没有规律,没有顺序,当然,可以放多个相同的东西.其次,东西 ...

  2. Spring的全局(统一)异常处理

    异常处理的三种方式 使用 @ExceptionHandler 注解 实现 HandlerExceptionResolver 接口(SpringMVC) 使用 @RestControllerAdvice ...

  3. C# NPOI 读取Excel数据,附案例源码

    项目结构 注意:需要引入NPOI类库 C#代码 Form1.cs using NPOI.HSSF.UserModel; using NPOI.SS.UserModel; using System; u ...

  4. nuxt3正确使用keepalive页面缓存组件缓存

    最近使用nuxt@3.x版本做SEO优化项目比较多,之前也踩坑过,所以记录一下在 nuxt3 中路由缓存的正确使用方法,本人也之前在GitHub社区中提交过反馈问题,最后是在 3.8.2 版本解决了路 ...

  5. UML类图的表示

    1.类的表示方法 2.接口的两种表示方法 3.类的继承怎么表示 空心三角形+实线 4.类实现接口 空心三角形+虚线 5.关联(association)关系 实线箭头 6.聚合(aggregation) ...

  6. move语义和完美转发

    move语义 值类别(value category)如下: lvalue:左值,在内存中有地址,可被程序员访问,可以放在赋值运算符左侧,也可以放在赋值运算符右侧,常见的左值有普通变量.字符串字面值&q ...

  7. 1.1 第一个hello程序

    还记得在每一个编程平台上的第一个程序都是hello world,现在就以这个程序为载体,先浅聊一下计算机系统吧. 1.预处理阶段,预处理器cpp根据字符#开头的命令修改原始的程序,并把头文件里的内容直 ...

  8. Apache Kyuubi 在B站大数据场景下的应用实践

    01 背景介绍 近几年随着B站业务高速发展,数据量不断增加,离线计算集群规模从最初的两百台发展到目前近万台,从单机房发展到多机房架构.在离线计算引擎上目前我们主要使用Spark.Presto.Hive ...

  9. Profinet转ModbusTCP网关模块连发那科机器人与DCS通讯

    一.现场要求:发那科机器人作为服务器端,DCS作为客户端向发那科机器人发送读写请求,发那科机器人应答后DCS接收发那科机器人的数据,实现数据的传递. 二.解决方案:在不增加编程任务的前提下只需在DCS ...

  10. 《Operating Systems: Three Easy Pieces》阅读记录

    OSTEP virtualization 进程 process 进程 API 进程 API 相关术语 进程状态 statu 机制:受限直接执行 进程调度:介绍 调度:多级反馈队列 MLFQ 调度:比例 ...