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)目后測(cè)試,第一次進(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)功能操作就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. Java commons-httpclient如果實(shí)現(xiàn)get及post請(qǐng)求2. 一文帶你徹底理解Java序列化和反序列化3. JS中6個(gè)對(duì)象數(shù)組去重的方法4. Python基于requests庫爬取網(wǎng)站信息5. vscode運(yùn)行php報(bào)錯(cuò)php?not?found解決辦法6. python中文本字符處理的簡(jiǎn)單方法記錄7. PHP laravel實(shí)現(xiàn)導(dǎo)出PDF功能8. Python使用Selenium自動(dòng)進(jìn)行百度搜索的實(shí)現(xiàn)9. PHP利用curl發(fā)送HTTP請(qǐng)求的實(shí)例代碼10. 資深程序員:給Python軟件開發(fā)測(cè)試的25個(gè)忠告!

網(wǎng)公網(wǎng)安備