文科少女學程式

又是一個因為小文件工具的開發，而遇到的問題。為了優化小文件功能，讓它使用上能更便利，前輩那裡著手加入了API釘選的功能，但是需要加入釘選功能的部分，是用React寫的swagger-ui，而我們的專案又是以vue下去開發的，有些操作上就變成不那麼容易另外進行客製化，而這次就有碰到使用swagger-ui原本有的anchor功能是行不通的狀況，因此需要透過DOM+web API的方式下去呈現anchor效果。雖然這個功能主要不是由我完成，但在看前輩寫的code的時候，覺得是一個自己沒有想過的解法，所以就特別記錄下來了。

使用DOM+web API實現anchor
實作情境
swagger-ui有deepLink的功能，但是我們想要額外實作出一個可以儲存deeplink的功能，並且在點擊這個link的同時，還要能透過anchor導到對應的區塊。不過這個實際實作上卻發現，若是在同一頁，anchor功能會起不了作用，因此最後的做法是透過DOM+scrollIntoView()的方式進行。

實作方式
利用DOM找到我們要設置anchor的區塊，搭配scrollIntoView()實作。

要anchor的區塊分別是#food、#shoes、#decoration，所以個別透過getElementById取得這幾個地方。最後再寫一個讓點擊按鈕時達到anchor效果的function。


最後這樣就可以透過另一個方式達到anchor的效果^^

完整的示範內容請點這裡
小補充：使用scrollIntoView()的時候，可以帶入一個object當作參數，裡面可以使用的參數有behavior、block、inline，可以讓實際呈現的anchor效果做微調，例如調整anchor後，滑動到的區塊是顯示在螢幕最上方、中間，或是最下方。


貼心小提醒！！
因為是亂亂寫筆記，真的就是純紀錄之前實作時，如何解決曾經卡住過的問題，所以主要都是解決問題的方式為主，不會有太多詳細說明。