vue 点击滑动到页面指定位置(点击下滑滚动)的功能

需求

点击页面上的 文字 滑动到页面指定位置

三种方法

javascript 复制代码
      document.getElementById('show').scrollIntoView() // 默认滚动至节点置顶
      document.getElementById('show').scrollIntoView(false) // 默认滚动至节点显示
      document.getElementById('show').scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" }); // 见下文

scrollIntoView() 方法的使用

scrollIntoView([alignToTop,scrollIntoViewOptions ]) 方法可以携带最多两个参数;

alignToTop 可选

复制代码
  如果为 true,元素的顶端将和其所在滚动区的可视区域的顶端对齐。这是这个参数的默认值。

  如果为 false,元素的底端将和其所在滚动区的可视区域的底端对齐。

scrollIntoViewOptions 可选

复制代码
  behavior 可选

        定义动画过渡效果,auto 或 smooth 之一。默认为 auto。

  block 可选

        定义垂直方向的对齐,start、center、end 或 nearest 之一。默认为 start。

  inline 可选

        定义水平方向的对齐,start、center、end 或 nearest 之一。默认为 nearest。

示例

html 复制代码
<div @click="switchMenu('1')">产品服务</div>
<div id="show" ref="view">展示</div>

1、利用scrollIntoView()方法,该方法将调用它的元素滚动到浏览器窗口的可见区域(根据其他元素的布局,元素可能无法完全滚动到顶部或底部)
ps:页面可滚动时才有用!!!可通过设置css实现

bash 复制代码
document.getElementById("show").scrollIntoView() 直接跳转到指定位置,效果比较生硬
javascript 复制代码
methods: {
    switchMenu(index) {
      console.log(111, index)
      switch (index) {
        case 0:
          break
        case 1:
          document.getElementById("show").scrollIntoView();
          break
        case 2:
          this.$message.success("敬请期待")
          break
        case 3:
          break
        default:
          break
      }
    }
  },

缓慢移动至目标

javascript 复制代码
 function switchMenu () {
      document.getElementById('kinds').scrollIntoView({ behavior: 'smooth' })
    }

scrollIntoView提供了scrollIntoViewOptions对象参数

相关推荐
web打印社区21 分钟前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗22 分钟前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长32 分钟前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅2 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_2 小时前
Chrome开发者工具
前端·chrome
YiHanXii2 小时前
this 输出题
前端·javascript·1024程序员节
楊无好2 小时前
React中ref
前端·react.js
维他命Coco2 小时前
js常见开发学习
javascript
程琬清君2 小时前
vue3 confirm倒计时
前端·1024程序员节
麦麦大数据2 小时前
F033 vue+neo4j图书智能问答+知识图谱推荐系统 |知识图谱+neo4j+vue+flask+mysql实现代码
vue.js·flask·nlp·neo4j·智能问答·图书·1024程序员节