vue關(guān)于錨點(diǎn)定位、跳轉(zhuǎn)到指定位置實(shí)現(xiàn)方式
更新時(shí)間：2024年04月28日 08:55:41 作者：皮卡丘是個(gè)程序猿
這篇文章主要介紹了vue關(guān)于錨點(diǎn)定位、跳轉(zhuǎn)到指定位置實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue錨點(diǎn)定位、跳轉(zhuǎn)到指定位置
直接上代碼
<template>
<div>
<nav class="nav">
<button @click="go('#m1')">昨天</button>
<button @click="go('#m2')">今天</button>
<button @click="go('#m3')">明天</button>
</nav>
<div style="height: 50px;"></div>
<div id="m1">
<h1>昨天</h1>
<div v-for="item in 50">昨天</div>
</div>
<div id="m2">
<h1>今天</h1>
<div v-for="item in 50">今天</div>
</div>
<div id="m3">
<h1>明天</h1>
<div v-for="item in 50">明天</div>
</div>
</div>
</template>
<script>
export default {
data() { return {}; },
methods: {
go(selector) {
document.querySelector(selector).scrollIntoView({
// 不想要滾動(dòng)動(dòng)畫(huà),則設(shè)置為"instant"
behavior: 'smooth', // 滾動(dòng)動(dòng)畫(huà)
block: 'center'
});
}
}
};
</script>
<style scoped>
.nav {
text-align: center;
position: fixed;
top: 0px;
width: 100%;
height: 50px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
background: #fff;
}
</style>
vue中錨點(diǎn)定位scrollIntoView
<el-card class="maodian">
<div slot="header" class="clearfix">
<span>maodian</span>
</div>
</el-card>
<el-button
type="text"
@click="handleJump('.maodian')"
>maodian</el-button>
Jump(val) {
const dom = document.querySelector(val);
if (dom) {
dom.scrollIntoView(true);
}
},使用element.scrollIntoView跳轉(zhuǎn)
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue實(shí)現(xiàn)簡(jiǎn)易購(gòu)物車(chē)頁(yè)面
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)易購(gòu)物車(chē)頁(yè)面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
Vue 組件參數(shù)校驗(yàn)與非props特性的方法
這篇文章主要介紹了Vue 組件參數(shù)校驗(yàn)與非props特性的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
Vux+Axios攔截器增加loading的問(wèn)題及實(shí)現(xiàn)方法
這篇文章主要介紹了Vux+Axios攔截器增加loading的問(wèn)題及實(shí)現(xiàn)方法，文中通過(guò)實(shí)例代碼介紹了vue中使用axios的相關(guān)知識(shí),需要的朋友可以參考下2018-11-11
vue3+element?Plus實(shí)現(xiàn)表格前端分頁(yè)完整示例
這篇文章主要給大家介紹了關(guān)于vue3+element?Plus實(shí)現(xiàn)表格前端分頁(yè)的相關(guān)資料,雖然很多時(shí)候后端會(huì)把分頁(yè),搜索,排序都做好,但是有些返回?cái)?shù)據(jù)并不多的頁(yè)面,或者其他原因不能后端分頁(yè)的通常會(huì)前端處理,需要的朋友可以參考下2023-08-08
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架。這篇文章整理了vue中的常用知識(shí)點(diǎn)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章主要介紹了Element Card 卡片的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了詳解vue-cli下ESlint 配置說(shuō)明，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章是一篇Vue.js的教程，目標(biāo)在于用一種常見(jiàn)的業(yè)務(wù)場(chǎng)景——分頁(yè)/無(wú)限加載，以及編寫(xiě)過(guò)程中自己的錯(cuò)誤寫(xiě)法，分享給大家，幫助讀者更好的理解Vue.js中的一些設(shè)計(jì)思想。2016-10-10
這篇文章主要介紹了Vue 的 v-model用法實(shí)例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-11-11
解決vue項(xiàng)目運(yùn)行提示W(wǎng)arnings while compiling.警告的問(wèn)題
這篇文章主要介紹了解決vue項(xiàng)目運(yùn)行提示W(wǎng)arnings while compiling.警告的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09