最近遇到一個(gè)需求，進(jìn)入頁(yè)面，滾動(dòng)到錨點(diǎn)位置。

如何實(shí)現(xiàn)？

在router文件下的index.js中

配置：

1.配置

2.路由跳轉(zhuǎn)

3.設(shè)置錨點(diǎn)

最后，我遇到了一個(gè)問(wèn)題，你npm run build 生成項(xiàng)目后測(cè)試，第一次進(jìn)入成功，然后在頁(yè)面中操作一波，刷新，網(wǎng)頁(yè)打開失敗，

顯示找不到資源。（不知?jiǎng)e人有沒(méi)有遇到過(guò)）

解決方案：將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)用。

通過(guò)滾動(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ì)與視口的頂部齊平）不過(guò)頂部不一定齊平。

以上這篇vue 實(shí)現(xiàn)錨點(diǎn)功能操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。