在尝试对一些滚动脚本进行调整以执行某些页面上的“跳转到”链接时,我注意到如果页面URL中包含哈希标签,则在加载页面后在地址栏上按回车键时,不同浏览器的行为是不同的。
例如,如果您加载了一个带有哈希标签的页面,然后从目标元素滚动,我注意到在Firefox和IE上,如果将光标放在地址栏上并按回车键,则页面将移动回具有与哈希标记相同的id属性的HTML元素,但页面不会重新加载。
我还注意到,在这种情况下,既不会触发
有没有办法在浏览器中检测此类事件?鉴于这超出了视口,我有点好奇。但是我有一个场景,我想根据页面向上或向下滚动来重新定位菜单。
为了尝试解释我正在寻找什么:
例如,如果您加载了一个带有哈希标签的页面,然后从目标元素滚动,我注意到在Firefox和IE上,如果将光标放在地址栏上并按回车键,则页面将移动回具有与哈希标记相同的id属性的HTML元素,但页面不会重新加载。
我还注意到,在这种情况下,既不会触发
popstate
事件,也不会触发hashchange
事件。最可能会触发scroll
事件,但我们如何知道这不是用户滚动而是浏览器重置其位置?有没有办法在浏览器中检测此类事件?鉴于这超出了视口,我有点好奇。但是我有一个场景,我想根据页面向上或向下滚动来重新定位菜单。
为了尝试解释我正在寻找什么:
- 带有hashtag
#test
和元素<div id="test">
的页面 - 按下F5,页面会定位到
<div>
所在的位置 - 向上或向下滚动
- 进入地址栏并按下回车键
- ---- 寻找一个事件来检测前面的操作 ---
- 页面会定位到
<div>
所在的位置
JSBin中的示例(在Firefox中打开):
http://jsbin.com/rifikereze/1/edit?html,js,output
输出:
http://output.jsbin.com/rifikereze/1#test2
- 在Firefox中打开控制台
- 确保在Firefox设置中启用“持久日志”以在页面重新加载后保留日志
- 按F5(您应该会看到一个控制台消息“已重新加载”)
- 现在尝试移动页面,将光标放在地址栏中并按Enter键
- 您将看到页面不会重新加载
除滚动事件外,我们如何检测这些事件?
请确保在Windows上使用Firefox进行尝试复制。其他操作系统似乎具有其他行为。