vue2 0模擬錨點實現定位

如果是傳統專案，這個效果就非常簡單。但是放到 vue 中，就有兩大難題：

1. 在沒有 jquery 的 animate() 方法的情況下，如何實現平滑滾動？

2. 如何監聽頁面滾動事件？

在瀏覽了大量文章、進行多次嘗試之後，終於解決了這些問題

期間主要涉及到了 settimeout 的遞迴用法，和 vue 生命週期中的 mounted

一、錨點實現

在實現平滑滾動之前，得先確保基本的錨點功能

如果沒有其他要求，直接用 是最簡單粗暴的辦法

但是為了滿足後續的要求，必須另外想辦法

首先在父元件（表單）中新增 class="d_jump" 作為鉤子

然後在子元件中新增乙個 jump 方法

通過 offsettop 獲取物件到窗體頂部的距離，然後賦值給 scrolltop，就能實現錨點的功能

需要注意的是，各瀏覽器下獲取 scrolltop 有所差異

chrome： document.body.scrolltop

firefox：document.documentelement.scrolltop

二、平滑滾動

僅僅是錨點是不夠的，這樣的跳轉十分突兀

為了更好的使用者體驗 ，需要將滾動的過程展現出來

如果有 jquery 實現平滑滾動就非常簡單：

$('html body').animate(, 500);

在看了好些文章之後，有了乙個大概的開發思路：

將總距離分成很多小段，然後每隔一段時間跳一段

只要每段的時間足夠短，頻次足夠多，在視覺上就是正常的平滑滾動了

// 平滑滾動，時長500ms，每10ms一跳，共50跳

// 獲取當前滾動條與窗體頂部的距離
let distance = document.documentelement.scrolltop || document.body.scrolltop
// 計算每一小段的距離
let step = total / 50
(function
smoothdown () else 
})()

jump (index)  

else
function
smoothdown () 
else
}function
smoothup () 
else} }

在上面展示的效果中，當頁面滾動的時候，錨點的啟用狀態會有相應的改變

其實這個效果並不難，只需要監聽頁面滾動事件，然後根據滾動條的距離修改錨點狀態就可以了

但是在 vue 中，應該在什麼地方監聽滾動事件呢？

mounted: function

() )
},methods: 
else
if (scrolled < 1063 && scrolled >= 586) 
else}}

mounted 是 vue 生命週期中的乙個狀態，在這個狀態下，$el （vue 例項的根元素）已經建立完畢，但還沒有載入資料

從結果上看，也可以在 created 狀態下監聽 scroll 事件

如果對 mounted 和 created 還不夠了解，可以參考官方文件·生命週期圖示 後記

上面只能算是乙個應急之法，而且這種操作 dom 的方法，並不符合 vue 的設計理念

待我研究出更合理更高效的辦法之後，再發出來分享~

vue2 0模擬錨點的例項

在vue專案中，因為採用路由跳轉，會導致無法使用常規的a標籤配合id的錨點功能。解決辦法 j ascript void 0 程式設計客棧rel external nofollow click goanchor anchor 灰啊灰啊我的驕傲放縱 程式設計客棧 a methods 17.9.20 更新...

vue2 0知識點彙總

vue簡介 資料流vue例項物件 vue常用指令 class結合v bind使用 methods 和 v on的使用 v on高階用法 v for的使用 簡單學生新增刪除案例 父子元件使用父傳子 父元件向自元件傳遞資料 子元件向父元件通訊vuebus vue高階 vue過濾器 獲取dom元素 vue...

vue跨頁面定位到錨點位置

效果 header頁面 公司介紹 發展歷程 榮譽資質 聲譽 about頁面 about頁面引入的common.js 跳轉到錨點 function goanchor selector 500 獲取引數 function getquerystring name var reg new regexp na...