vue關(guān)于錨點定位、跳轉(zhuǎn)到指定位置實現(xiàn)方式
更新時間：2024年04月28日 08:55:41 作者：皮卡丘是個程序猿
這篇文章主要介紹了vue關(guān)于錨點定位、跳轉(zhuǎn)到指定位置實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue錨點定位、跳轉(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({
// 不想要滾動動畫,則設(shè)置為"instant"
behavior: 'smooth', // 滾動動畫
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中錨點定位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é)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇vue遍歷生成的輸入框 綁定及修改值示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
詳解關(guān)于vue-area-linkage走過的坑
這篇文章主要介紹了詳解關(guān)于vue-area-linkage走過的坑，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了vue3子傳父v-model輔助值傳遞的步驟,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2025-05-05
這篇文章主要為大家詳細(xì)介紹了vue集成百度UEditor富文本編輯器的使用教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09
this.$nextTick是在下次dom更新循環(huán)之后執(zhí)行延遲回調(diào),在修改數(shù)據(jù)之后立即使用這個方法,獲取更新后的dom,下面這篇文章主要給大家介紹了關(guān)于Vue中this.$nextTick()的理解與使用的相關(guān)資料,需要的朋友可以參考下2022-02-02
vue集成openlayers加載geojson并實現(xiàn)點擊彈窗教程
這篇文章主要為大家詳細(xì)介紹了vue集成openlayers加載geojson并實現(xiàn)點擊彈窗教程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
Vue Element UI 中 el-table 樹形數(shù)據(jù)
這篇文章主要介紹了Vue Element UI 中 el-table 樹形數(shù)據(jù) tree-props 多層級使用避坑指南,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
這篇文章主要為大家介紹了Vue中使用Teleport的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
文章介紹了一個Vue組件,該組件允許用戶通過鼠標(biāo)右鍵在畫布上繪制矩形,并且支持通過Ctrl鍵進行多選,文章附帶了組件代碼和一個示例,建議讀者將代碼復(fù)制到自己的開發(fā)環(huán)境中進行調(diào)試2024-12-12
vue中使用Cesium加載shp文件、wms服務(wù)、WMTS服務(wù)問題
這篇文章主要介紹了vue中使用Cesium加載shp文件、wms服務(wù)、WMTS服務(wù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05