历史API,url片段,css:target,滚动位置

时间:2015-09-05 21:44:08

标签: javascript css browser html5-history

当加载具有片段的网址时,如/help#beer,浏览器将呈现网页/help,然后滚动到ID为beer的元素,并使用任何css设置元素的样式:target选择器上的规则。

对于单页应用,这在首页加载时工作正常:客户端路由器将根据网址呈现正确的内容,浏览器将滚动并设置目标样式。

但是,当通过历史记录API导航时,它无法正常工作:使用js路由器导航到/help#beer将呈现/help页面,并推送状态/help#beer历史API。这不会导致浏览器滚动到标识beer,或者将其设置为样式。

除了在javascript中重新实现浏览器功能外,还有其他解决方案吗?

可以分配

window.location.hash,这会导致浏览器滚动并设置:target的样式。我可以推送状态/help,呈现页面,然后将window.location.hash分配给#beer,然后滚动和样式将是正确的。然而,我在历史记录中有一个额外的状态,因此后退按钮没有按预期工作。

0 个答案:

没有答案