最近在做一個關於語音識別的項目, 涉及到語音消息的實時推送, 語音內容的識別與內容關聯話術推薦, 做的時候需要實現一個識別出來的內容關聯客戶對話內容的功能, 簡而言之就是實現一個點擊跳轉到在實時更新的對話框內與當前內容相關聯的特定元素的功能, 實現的過程中用一個很巧妙的辦法解決了, 這裏記錄一下.
方法一: 利用錨鏈接 / 直接改變hash值
說道頁面內的跳轉, 有過一段時間開發經驗的同學想到的第一種方法應該就是這種,錨鏈接的使用方式也很簡單, 如果想要跳轉到id爲targetBox 的 div
只需要加上window.location.hash = ''#targetBox" z或者加上如下點擊鏈接就行:
<a href="#targetBox">點我就能跳轉</a>
但是使用此種方法也是有缺陷的, 因爲它改變了頁面的路由地址, 在vue的項目中,實現spa單頁應用的原理就是通過修改hash值來改變加載內容, 一旦這樣跳轉, 頁面路由就會出現問題,因此在vue項目中這種方式基本上無法使用.
方法二: 利用scrollTop
這種方式也是很常見的一種, 利用頁面的高度差,跳轉到特定位置, 如果高度差爲100:
document.getElementById('targetBox') = 100
由於項目當中的語音對話框是實時更新的,這種方法在當高度差實時發生變換的時候並不好用.
方法三: 通過讓元素獲得焦點
這個方法之前沒有用過,其原理是通過讓元素支持focus事件,讓元素獲取焦點,div正常情況下是無法像input元素一樣獲得焦點的，但是正如我們可以通過給div加上conteneditable屬性讓div元素變得可以編輯一樣,在這裏我們也可以通過給div元素加上tabindex = "0"的屬性讓元素可以獲取焦點:
<div id="targetBox" tabindex = "0"></div>
document.getElementById("targetBox").focus();
這樣實現跳轉之後的元素會加上一個藍色的選中邊框,可通過設置outline:none;屬性取消.
方法四: 利用scrollIntoView方法
此方法可以簡單的通過獲取元素就讓當前的元素滾動到瀏覽器窗口的可視區域內:
<div id="targetBox" tabindex = "0"></div>
document.getElementById("targetBox").focus();
通過設置alignToTop參數來設置元素的顯示位置, 如果爲true，元素的頂端將和其所在滾動區的可視區域的頂端對齊,如果爲false，元素的底端將和其所在滾動區的可視區域的底端對齊.顯然這種方式最是簡單,推薦這種.