vue 實(shí)現(xiàn)錨點(diǎn)功能操作
最近遇到一個(gè)需求，進(jìn)入頁面，滾動(dòng)到錨點(diǎn)位置。
如何實(shí)現(xiàn)？
在router文件下的index.js中
配置：
1.配置
2.路由跳轉(zhuǎn)
3.設(shè)置錨點(diǎn)
最后，我遇到了一個(gè)問題，你npm run build 生成項(xiàng)目后測試，第一次進(jìn)入成功，然后在頁面中操作一波，刷新，網(wǎng)頁打開失敗，
顯示找不到資源。（不知?jiǎng)e人有沒有遇到過）
解決方案：將router文件夾下index.js中的mode:"history" 注釋掉。
補(bǔ)充知識(shí)：vue開發(fā)中，實(shí)現(xiàn)錨點(diǎn)定位及跳轉(zhuǎn)（url不發(fā)生變化）
如下所示：
<template>
<div>
<div id='header'></div>
<div class='footer' @click='returnTop'></div>
</div>
</template>
methods:{
returnTop(){
document.querySelector("#header").scrollIntoView(true);
}
}
document.querySelector(“要返回地方的id”).scrollIntoView(true);
HTML5選擇了scrollIntoView() 作為標(biāo)準(zhǔn)方法,scrollIntoView()可以在所有的HTML元素上調(diào)用。
通過滾動(dòng)瀏覽器窗口或某個(gè)容器元素，調(diào)用元素就可以出現(xiàn)在視窗中。
如果給該方法傳入true作為參數(shù)，或者不傳入任何參數(shù)，那么 窗口滾動(dòng)之后會(huì)讓調(diào)動(dòng)元素頂部和視窗頂部盡可能齊平。
如果給該方法傳入false作為參數(shù)，調(diào)用元素會(huì)盡可能全部出現(xiàn)在視口中（可能的話，調(diào)用元素的底部會(huì)與視口的頂部齊平）不過頂部不一定齊平。
以上這篇vue 實(shí)現(xiàn)錨點(diǎn)功能操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue如何動(dòng)態(tài)改變列表搜索出關(guān)鍵詞的字體顏色
這篇文章主要介紹了Vue如何動(dòng)態(tài)改變列表搜索出關(guān)鍵詞的字體顏色問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Tailwind是由Adam Wathan領(lǐng)導(dǎo)的TailwindLabs開發(fā)的 CSS 框架，這篇文章主要介紹了vue3?tailwindcss的使用,需要的朋友可以參考下2023-08-08
Vue中scoped樣式的作用是通過在DOM結(jié)構(gòu)和CSS樣式上添加唯一標(biāo)記來實(shí)現(xiàn)樣式私有化和模塊化,這一功能是通過PostCSS轉(zhuǎn)譯實(shí)現(xiàn)的,總結(jié)了三條渲染規(guī)則：1. 為HTML DOM節(jié)點(diǎn)添加不重復(fù)的data屬性；2. 在每個(gè)CSS選擇器末尾添加當(dāng)前組件的data屬性選擇器2025-01-01
vue中$router.back()和$router.go()的用法
這篇文章主要介紹了vue中$router.back()和$router.go()的用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue+導(dǎo)航錨點(diǎn)聯(lián)動(dòng)-滾動(dòng)監(jiān)聽和點(diǎn)擊平滑滾動(dòng)跳轉(zhuǎn)實(shí)例
今天小編就為大家分享一篇vue+導(dǎo)航錨點(diǎn)聯(lián)動(dòng)-滾動(dòng)監(jiān)聽和點(diǎn)擊平滑滾動(dòng)跳轉(zhuǎn)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue監(jiān)聽input標(biāo)簽的value值方法
今天小編就為大家分享一篇vue監(jiān)聽input標(biāo)簽的value值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue 中url 鏈接左邊的小圖標(biāo)更改問題，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12
Vite創(chuàng)建Vue3項(xiàng)目及Vue3使用jsx詳解
vite是新一代的前端構(gòu)建工具,下面這篇文章主要給大家介紹了關(guān)于Vite創(chuàng)建Vue3項(xiàng)目以及Vue3使用jsx的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
Vue CLI3搭建的項(xiàng)目中路徑相關(guān)問題的解決
這篇文章主要介紹了Vue CLI3搭建的項(xiàng)目中路徑相關(guān)問題的解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了Vue使用Echart圖標(biāo)插件之柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04