使用浏览器后退按钮在可滚动元素中导航
Use Browser Back Button For Navigation in a Scrollable Element
场景如下：我有一个带有滚动条的元素。用户单击 link 将他们带到此元素内的书签，这会导致元素滚动。
之后当用户想return到原来的滚动位置时，他们自然要做的就是点击浏览器的后退按钮。
有趣的是，浏览器的地址栏会更新以反映元素内的初始导航以及后退按钮的点击。但是，单击后退按钮不会导致所需的滚动。这是有道理的。
那么，有没有办法直接使用 javascript（没有第三方库）来实现这一点？下面是一个完整的示例，div 底部有一个 link。如有任何帮助，我们将不胜感激。
<style>
div {
height:400px;
overflow-y: auto;
}
span {
position:relative;
display:block;
width: 600px;
margin-top: 30px;
margin-bottom: 30px;
}
</style>
<div>
<span id="first">
First: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum eu facilisis sed odio morbi quis. Vitae purus faucibus ornare suspendisse sed nisi lacus sed. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Porta non pulvinar neque laoreet. Pulvinar sapien et ligula ullamcorper malesuada proin. Neque gravida in fermentum et. Magna sit amet purus gravida. Id porta nibh venenatis cras sed felis. Sed egestas egestas fringilla phasellus faucibus. Mus mauris vitae ultricies leo integer malesuada nunc vel. Pellentesque eu tincidunt tortor aliquam nulla facilisi. Dis parturient montes nascetur ridiculus mus mauris vitae. Ac orci phasellus egestas tellus rutrum. Aliquam ut porttitor leo a diam sollicitudin tempor. Risus nullam eget felis eget nunc lobortis. Sodales ut eu sem integer vitae justo. Volutpat commodo sed egestas egestas fringilla phasellus faucibus.
</span>
<span id="second">
Second: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum eu facilisis sed odio morbi quis. Vitae purus faucibus ornare suspendisse sed nisi lacus sed. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Porta non pulvinar neque laoreet. Pulvinar sapien et ligula ullamcorper malesuada proin. Neque gravida in fermentum et. Magna sit amet purus gravida. Id porta nibh venenatis cras sed felis. Sed egestas egestas fringilla phasellus faucibus. Mus mauris vitae ultricies leo integer malesuada nunc vel. Pellentesque eu tincidunt tortor aliquam nulla facilisi. Dis parturient montes nascetur ridiculus mus mauris vitae. Ac orci phasellus egestas tellus rutrum. Aliquam ut porttitor leo a diam sollicitudin tempor. Risus nullam eget felis eget nunc lobortis. Sodales ut eu sem integer vitae justo. Volutpat commodo sed egestas egestas fringilla phasellus faucibus.
</span>
<span id="third">
Third: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum eu facilisis sed odio morbi quis. Vitae purus faucibus ornare suspendisse sed nisi lacus sed. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Porta non pulvinar neque laoreet. Pulvinar sapien et ligula ullamcorper malesuada proin. Neque gravida in fermentum et. Magna sit amet purus gravida. Id porta nibh venenatis cras sed felis. Sed egestas egestas fringilla phasellus faucibus. Mus mauris vitae ultricies leo integer malesuada nunc vel. Pellentesque eu tincidunt tortor aliquam nulla facilisi. Dis parturient montes nascetur ridiculus mus mauris vitae. Ac orci phasellus egestas tellus rutrum. Aliquam ut porttitor leo a diam sollicitudin tempor. Risus nullam eget felis eget nunc lobortis. Sodales ut eu sem integer vitae justo. Volutpat commodo sed egestas egestas fringilla phasellus faucibus.
</span>
<span id="forth">
Forth: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum eu facilisis sed odio morbi quis. Vitae purus faucibus ornare suspendisse sed nisi lacus sed. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Porta non pulvinar neque laoreet. Pulvinar sapien et ligula ullamcorper malesuada proin. Neque gravida in fermentum et. Magna sit amet purus gravida. Id porta nibh venenatis cras sed felis. Sed egestas egestas fringilla phasellus faucibus. Mus mauris vitae ultricies leo integer malesuada nunc vel. Pellentesque eu tincidunt tortor aliquam nulla facilisi. Dis parturient montes nascetur ridiculus mus mauris vitae. Ac orci phasellus egestas tellus rutrum. Aliquam ut porttitor leo a diam sollicitudin tempor. Risus nullam eget felis eget nunc lobortis. Sodales ut eu sem integer vitae justo. Volutpat commodo sed egestas egestas fringilla phasellus faucibus.
</span>
<a href="#first">Click to go to first paragraph, then click the browser Back button to return here</a>
</div>
当用户使用 ID 或浏览器后退按钮单击 link 时，url 会发生变化。所以你可以处理这个事件：
window.addEventListener('hashchange', function (event) {
// The URL changed...
});
那么你有 event.newURL 和 event.oldURL。有了它，你可以做任何你想做的事。
场景如下：我有一个带有滚动条的元素。用户单击 link 将他们带到此元素内的书签，这会导致元素滚动。
之后当用户想return到原来的滚动位置时，他们自然要做的就是点击浏览器的后退按钮。
有趣的是，浏览器的地址栏会更新以反映元素内的初始导航以及后退按钮的点击。但是，单击后退按钮不会导致所需的滚动。这是有道理的。
那么，有没有办法直接使用 javascript（没有第三方库）来实现这一点？下面是一个完整的示例，div 底部有一个 link。如有任何帮助，我们将不胜感激。
<style>
div {
height:400px;
overflow-y: auto;
}
span {
position:relative;
display:block;
width: 600px;
margin-top: 30px;
margin-bottom: 30px;
}
</style>
<div>
<span id="first">
First: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum eu facilisis sed odio morbi quis. Vitae purus faucibus ornare suspendisse sed nisi lacus sed. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Porta non pulvinar neque laoreet. Pulvinar sapien et ligula ullamcorper malesuada proin. Neque gravida in fermentum et. Magna sit amet purus gravida. Id porta nibh venenatis cras sed felis. Sed egestas egestas fringilla phasellus faucibus. Mus mauris vitae ultricies leo integer malesuada nunc vel. Pellentesque eu tincidunt tortor aliquam nulla facilisi. Dis parturient montes nascetur ridiculus mus mauris vitae. Ac orci phasellus egestas tellus rutrum. Aliquam ut porttitor leo a diam sollicitudin tempor. Risus nullam eget felis eget nunc lobortis. Sodales ut eu sem integer vitae justo. Volutpat commodo sed egestas egestas fringilla phasellus faucibus.
</span>
<span id="second">
Second: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum eu facilisis sed odio morbi quis. Vitae purus faucibus ornare suspendisse sed nisi lacus sed. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Porta non pulvinar neque laoreet. Pulvinar sapien et ligula ullamcorper malesuada proin. Neque gravida in fermentum et. Magna sit amet purus gravida. Id porta nibh venenatis cras sed felis. Sed egestas egestas fringilla phasellus faucibus. Mus mauris vitae ultricies leo integer malesuada nunc vel. Pellentesque eu tincidunt tortor aliquam nulla facilisi. Dis parturient montes nascetur ridiculus mus mauris vitae. Ac orci phasellus egestas tellus rutrum. Aliquam ut porttitor leo a diam sollicitudin tempor. Risus nullam eget felis eget nunc lobortis. Sodales ut eu sem integer vitae justo. Volutpat commodo sed egestas egestas fringilla phasellus faucibus.
</span>
<span id="third">
Third: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum eu facilisis sed odio morbi quis. Vitae purus faucibus ornare suspendisse sed nisi lacus sed. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Porta non pulvinar neque laoreet. Pulvinar sapien et ligula ullamcorper malesuada proin. Neque gravida in fermentum et. Magna sit amet purus gravida. Id porta nibh venenatis cras sed felis. Sed egestas egestas fringilla phasellus faucibus. Mus mauris vitae ultricies leo integer malesuada nunc vel. Pellentesque eu tincidunt tortor aliquam nulla facilisi. Dis parturient montes nascetur ridiculus mus mauris vitae. Ac orci phasellus egestas tellus rutrum. Aliquam ut porttitor leo a diam sollicitudin tempor. Risus nullam eget felis eget nunc lobortis. Sodales ut eu sem integer vitae justo. Volutpat commodo sed egestas egestas fringilla phasellus faucibus.
</span>
<span id="forth">
Forth: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum eu facilisis sed odio morbi quis. Vitae purus faucibus ornare suspendisse sed nisi lacus sed. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Porta non pulvinar neque laoreet. Pulvinar sapien et ligula ullamcorper malesuada proin. Neque gravida in fermentum et. Magna sit amet purus gravida. Id porta nibh venenatis cras sed felis. Sed egestas egestas fringilla phasellus faucibus. Mus mauris vitae ultricies leo integer malesuada nunc vel. Pellentesque eu tincidunt tortor aliquam nulla facilisi. Dis parturient montes nascetur ridiculus mus mauris vitae. Ac orci phasellus egestas tellus rutrum. Aliquam ut porttitor leo a diam sollicitudin tempor. Risus nullam eget felis eget nunc lobortis. Sodales ut eu sem integer vitae justo. Volutpat commodo sed egestas egestas fringilla phasellus faucibus.
</span>
<a href="#first">Click to go to first paragraph, then click the browser Back button to return here</a>
</div>
当用户使用 ID 或浏览器后退按钮单击 link 时，url 会发生变化。所以你可以处理这个事件：
window.addEventListener('hashchange', function (event) {
// The URL changed...
});
那么你有 event.newURL 和 event.oldURL。有了它，你可以做任何你想做的事。