<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. JpaRepository:Paging query needs to have a Pageable parameter! Offending method public abstract

    在练习 Spring Data JPA 时,使用分页接口 Pageable 查询数据,接口实现后,运行报错: Paging query needs to have a Pageable paramet ...

  2. 没想你是这样的AI。。。

  3. SpringMVC springmvc.xml配置路径前缀和后缀

    web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi=" ...

  4. 原创软件 | 第3期:PDF合并分割助手V1.0(个人免费)

    这是一个短的"发布会". 01 基本介绍 近期开发了一个[PDF合并分割助手]. 它是一个实现pdf快速合并.分割的免费软件. 你拥有以下7种选项设置. >>合并选项& ...

  5. Python 代码中的 yield 到底是什么?

    在Python编程中,有一个强大而神秘的关键字,那就是yield.初学者常常被它搞得晕头转向,而高级开发者则借助它实现高效的代码.到底yield是什么?它又是如何在Python代码中发挥作用的呢?让我 ...

  6. 这才是 PHP 高性能框架 Workerman 的立命之本

    大家好,我是码农先森. 在这个大家都崇尚高性能的时代,程序员的谈笑间句句都离不开高性能,仿佛嘴角边不挂着「高性能」三个字都会显得自己很 Low,其中众所皆知的 Nginx 就是高性能的代表.有些朋友可 ...

  7. 【Java】 Void 类型

    void 也算一个类型,而且是基本数据类型 和其它数据类型一样提供了对应的包装类Void 每个包装类都提供一个TYPE字节实例,返回对应的原型类实例 public static void main(S ...

  8. 强化学习 —— reinforce算法中更新一次策略网络时episodes个数的设置对算法性能的影响 —— reinforce算法中迭代训练一次神经网络时batch_size大小的不同设置对算法性能的影响

    本文相关的博客:(预先知识) 强化学习中经典算法 -- reinforce算法 -- (进一步理解, 理论推导出的计算模型和实际应用中的计算模型的区别) 本文代码地址: https://gitee.c ...

  9. python3.13是否移除了GIL的限制

    近日看到新闻: https://baijiahao.baidu.com/s?id=1773013936355276204&wfr=spider&for=pc https://www.t ...

  10. Ubuntu系统anaconda报错version `GLIBCXX_3.4.30' not found

    参考文章: https://blog.csdn.net/zhu_charles/article/details/75914060 =================================== ...