<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. ubuntu16 安装 python-networkmanager 失败

    前言 ubuntu16 安装 python-networkmanager 失败 解决方案 sudo apt-get install libdbus-1-dev sudo apt-get install ...

  2. Solo 开发者周刊 (第7期):Sora出世,或许又一行业将会消失?

    这里会整合 Solo 社区每周推广内容.产品模块或活动投稿,每周五发布.在这期周刊中,我们将深入探讨开源软件产品的开发旅程,分享来自一线独立开发者的经验和见解.本杂志开源,欢迎投稿. 好文推荐 sor ...

  3. django如何将查询结果的栏位和数值自动遍历出来

    在Django中,MT003HModel.objects.all() 返回的是一个 QuerySet 对象,你可以使用迭代器来遍历其中的每个对象,然后访问对象的属性来获取栏位和数值. 以下是一个简单的 ...

  4. C# 常用类和命名空间

    Array类 用括号声明数组是C#中使用Array类的记号.在后台使用C#语法,会创建一个派生于抽象基类Array的新类.这样,就可以使用Array类为每个C#数组定义的方法和属性了. Array类实 ...

  5. 🚀RabbitMQ+redis+Redisson分布式锁+seata实现订单服务

    引言 订单服务涉及许多方面,分布式事务,分布式锁,例如订单超时未支付要取消订单,订单如何防止重复提交,如何防止超卖.这里都会使用到. 开启分布式事务可以保证跨多个服务的数据操作的一致性和完整性, 使用 ...

  6. RHCA rh442 002 监控工具 脏页 块设备名 缓存

    sar 看某一个时间的数据 sar -d 1 5 与iostat类似 计算机识别设备按编号识别 0-15预留出 8 为iscsi设备 做一个块设备名 名字不重要是给人看的,重要的是编号 8 17(主编 ...

  7. 使用 useState 管理响应式状态

    title: 使用 useState 管理响应式状态 date: 2024/8/1 updated: 2024/8/1 author: cmdragon excerpt: 摘要:本文详细介绍了在Nux ...

  8. 9、IDEA集成Github

    9.1.登录Github账号 9.1.1.打开IDEA的Settings界面 如上图所示,打开IDEA的 Settings(设置)界面. 9.1.2.使用账号密码登录(方式一) 如上图所示,在&quo ...

  9. 【H5】04 建立超链接

    摘自: https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks 超链接 ...

  10. iOS开发基础146-深入解析WKWebView

    WKWebView是苹果在iOS 8中引入的重要组件,它替代了UIWebView,为开发者提供了高性能.高稳定性的网页显示和交互能力.在本文中,我们将深入探讨WKWebView的底层架构.关键特性.使 ...