vue 實現錨點功能操作
最近遇到一個需求,進入頁面,滾動到錨點位置。
如何實現?
在router文件下的index.js中
配置:
1.配置
2.路由跳轉
3.設置錨點
最后,我遇到了一個問題,你npm run build 生成項目后測試,第一次進入成功,然后在頁面中操作一波,刷新,網頁打開失敗,
顯示找不到資源。(不知別人有沒有遇到過)
解決方案:將router文件夾下index.js中的mode:'history' 注釋掉。
補充知識:vue開發中,實現錨點定位及跳轉(url不發生變化)
如下所示:
<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() 作為標準方法,scrollIntoView()可以在所有的HTML元素上調用。
通過滾動瀏覽器窗口或某個容器元素,調用元素就可以出現在視窗中。
如果給該方法傳入true作為參數,或者不傳入任何參數,那么 窗口滾動之后會讓調動元素頂部和視窗頂部盡可能齊平。
如果給該方法傳入false作為參數,調用元素會盡可能全部出現在視口中(可能的話,調用元素的底部會與視口的頂部齊平)不過頂部不一定齊平。
以上這篇vue 實現錨點功能操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。
相關文章:
