vue-页面加载后到指定位置

TO_WebNow

已于 2022-06-14 17:25:43 修改

阅读量397

点赞数 1

分类专栏： Vue 文章标签： vue.js elementui javascript

于 2022-06-12 14:48:06 首次发布

本文链接：https://blog.csdn.net/to_web/article/details/125245402

版权

Vue 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

本文介绍如何在页面加载完成后，使用JavaScript实现元素平滑滚动到指定位置，包括`scrollIntoView`方法的使用技巧和自定义过渡动画。重点讲解`scrollIntoViewOptions`参数的行为设定，确保用户体验流畅。

摘要由CSDN通过智能技术生成

功能点：当页面加载完后过渡到指定位置

// 这个是你要到的位置的部分， 注意这个id
<div class="hideMode" id="mapContent"> </div>

            this.$nextTick(() => {
               setTimeout(() => {
                    document.getElementById("mapContent").scrollIntoView({
                      block: 'start',
                      behavior: 'smooth'
                    })
              },2900);
            })

scrollIntoViewOptions	[可选]，目前这个参数浏览器对它的支持并不好，
behavior	[可选]定义过渡动画。`"auto"`,`"instant"`或`"smooth"`。默认为`"auto"`。
block	[可选] `"start"`，`"center"`，`"end"`或`"nearest"`。默认为`"center"`。
inline	[可选] `"start"`，`"center"`，`"end"`或`"nearest"`。默认为`"nearest"`。