当页面内容过多，超出了浏览器可视区域就会出现滚动条。访问者浏览到当前页面底部的时候，总要通过某种方式来回到头部的导航区域。这时可以利用滚动条，但开发者通常会在页面底部添加一条空链接(<a href="#">Top</a>)来帮助访问者回到页面头部。Web观念的革新带来了设计理念的飞跃，良好的用户体验成为Web2.0时代的普遍追求。利用JavaScript技术可以使停留在页面底部的滚动条平稳且带有动画效果地滑到页面头部。这里只是讨论一下关于滚动条的问题，至于要达到动画效果请参考别的文章。

其实获取页面滚动条的位置并不是难点所在，关键是要兼容各家浏览器的不同实现。

HTML文档头部没有<!DOCTYPE..声明时，Chrome和Safari可以得到滚动条的值，其他的浏览器只返回0。建议所有的文档都加上DOCTYPE声明，以便JavaScript可以更好地工作。各主流浏览器可通过以下的方式获取滚动条的值。

Firefox、Opera、IE   document.documentElement.scrollTop
Chrome、Safari       document.body.scrollTop

scrollTop属性返回垂直滚动条距页面上部的距离，而scrollLeft则返回水平滚动条距页面左侧的距离。下面两个小函数分别获得元素的滚动条值。

var scrollX = function(elem) { // 水平滚动条
  elem = elem || document.body;
  return elem.scrollLeft || 
    (document.documentElement && document.documentElement.scrollLeft);
}
var scrollY = function(elem) { // 垂直滚动条
  elem = elem || document.body;
  return elem.scrollTop ||
    (document.documentElement && document.documentElement.scrollTop);
}

该函数参考了《精通JavaScript》中的小函数。HTML文档中，textarea元素的内容超出给定的高度时会出现滚动条，这时也可以使用该函数获取其滚动条的值。

window对象有scrollTo方法用来移动滚动条，改方法有两个参数(x, y)，分别对应浏览器滚动条的偏移量。该方法只对window对象适用，要想改变其他元素滚动条的值，仍要修改元素的scrollLeft或scrollTop属性。