<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. java 提取证书指纹

    正文 用到的依赖 <dependency> <groupId>org.bouncycastle</groupId> <artifactId>bcprov ...

  2. SpringBoot快速插入Mysql 1000万条数据

    导读 有时候为了验证系统瓶颈,需要往数据库表中插入大量数据,可以写sheel脚本插入,前几天为了插入100万条数据,走的sheel脚本(点我直达),插入速度简直无法直视,花了3小时,才插入了10万条, ...

  3. Spring(注解方式)简单入门

    环境准备 maven jdk Spring Eclipse 项目创建 pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0 ...

  4. 透视开源生态,OSGraph——GitHub全域数据图谱的智能洞察工具

    "透视开源生态,OSGraph--GitHub全域数据图谱的智能洞察工具 OSGraph (Open Source Graph) 是一个开源图谱关系洞察工具,基于GitHub开源数据全域图谱 ...

  5. PHP7新特性之类型声明

    今天我在这里总结下PHP7主要的新特性. 1.类型声明 做过php开发的小伙伴们都知道,php7以前的版本变量是不需要声明类型的,函数返回值也是不需要声明类型的,总之,在我们的脑海中就没有这么回事.可 ...

  6. 数据仓库建模工具之一——Hive学习第一天

    hive分布式搭建文档 谷歌浏览器下载网址:Google Chrome – Download the fast, secure browser from Google 华为云镜像站:https://m ...

  7. [oeasy]python0120_英语的崛起_英文字符_小写字母的由来_不列颠帝国

    各语言字符编码 回忆上次内容 罗马 承袭了 希腊的文化 学习了 希腊的字符   拥有 罗马帝国的战力 基督教文化的影响     ​   添加图片注释,不超过 140 字(可选)   这个时候 不列颠 ...

  8. 2024 暑假友谊赛-热身1(7.11)zhaosang

    A-A https://vjudge.net/contest/639453#problem/A 为了解决这个问题,我们需要确定将墙上的所有数字转换为数字1的最小成本.将数字i转换成数字j的代价由矩阵c ...

  9. mybatis源码分析:Mapper接口是什么

    在<mybatis源码分析:启动过程>中分析了mybatis的启动过程,mybatis的启动过程主要集中在解析其核心配置文件(mybatis-config.xml)上,把配置文件中的配置全 ...

  10. 修改PE文件来实现管理员权限

    在Windows我们常用的方法就是给应用添加app.manifest清单文件,然后生成的Exe就会具有管理员权限. 近期我在使用Wix制作Exe安装包时,发现此方法不通,我在github上和Stack ...