首页 > 技术文章 > 使用锚点定位页面位置

scott-j 2018-05-06 12:18 原文

类似聊天页面,新的消息会显示在页面的最下面,但默认只是数据加载了,页面位置还是当前位置。

为了让数据实时显示在可视区域,可以在聊天记录展示页面标签下面增加一个空白的标签(增加ID),通过动态定位该标签实现。

如下代码:

<div id="chatDiv">
    <div class="chat">聊天内容1</div>
    <div class="chat">聊天内容2</div>
    <div class="chat">聊天内容3</div>
</div>
<div id="bottomDiv" style="width:10px;height:10px"></div>

如上代码定义了锚点:<div id="bottomDiv" style="width:10px;height:10px"></div>

在有信心聊天内容产生后,通过js代码定位

如下代码:

//业务代码

document.getElementById('bottomDiv').scrollIntoView();

 

推荐阅读