最近在做一个关于语音识别的项目, 涉及到语音消息的实时推送, 语音内容的识别与内容关联话术推荐, 做的时候需要实现一个识别出来的内容关联客户对话内容的功能, 简而言之就是实现一个点击跳转到在实时更新的对话框内与当前内容相关联的特定元素的功能, 实现的过程中用一个很巧妙的办法解决了, 这里记录一下.

方法一: 利用锚链接 / 直接改变hash值

说道页面内的跳转, 有过一段时间开发经验的同学想到的第一种方法应该就是这种,锚链接的使用方式也很简单, 如果想要跳转到id为targetBox 的 div

只需要加上window.location.hash = ''#targetBox" z或者加上如下点击链接就行:

<a href="#targetBox">点我就能跳转</a>

 但是使用此种方法也是有缺陷的, 因为它改变了页面的路由地址, 在vue的项目中,实现spa单页应用的原理就是通过修改hash值来改变加载内容, 一旦这样跳转, 页面路由就会出现问题,因此在vue项目中这种方式基本上无法使用.

 

方法二: 利用scrollTop

这种方式也是很常见的一种, 利用页面的高度差,跳转到特定位置, 如果高度差为100:

document.getElementById('targetBox').scrollTop = 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").scrollIntoView();

通过设置alignToTop参数来设置元素的显示位置, 如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐,如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐.显然这种方式最是简单,推荐这种.