网页自动滚屏实现技巧
2011-06-26 by Dron
网页上，为了方便用户及时看到有价值的信息，通常会采用自动滚屏的交互效果，使变化的信息在第一时间呈现。
滚屏的实现，普遍做法是改变网页根节点的 scrollTop 和 scrollLeft 属性，就像这样：
document.documentElement.scrollTop = 500; // 滚动到 500px 的位置scrollTop 和 scrollLeft 属性接受一个数值，需要涉及到元素位置的计算（记得那个复杂的位置计算的算法么？），对于需要滚动至某个元素可见，scrollTop 和 scrollLeft 不见得是最优的方案，其实，除了这种办法，我们还可以有以下两种办法来达到滚动的目的。
地址栏中 # 号后面的字符串叫做 hash，浏览器在网页打开完成后或者在 hash 值改变时，会自动滚屏至名称与 hash 值相等的锚点元素位置上，利用这个特性，我们可以在需要的位置插入锚名，然后通过改变 location.hash 的值来达到滚屏效果，具体写法这里就不细说了。
这种方案有一定缺陷，在某些浏览器下，hash 值的改变会产生浏览历史记录，导致对历史记录的破坏，影响用户使用前进后退功能；而且，在一些网页里，hash 值可能会有其它的用途，这样做将影响到这些功能。