滚动条定位效果其实就是指定的内容定位在指定的范围之内了，这种效果我们可以通过css与javascript来实现了，下面一起来看一个Jquery+css实现滚动条定位效果制作的全过程，具体如下,这是在P项目碰到的一个功能实现，我姑且把它称为滚动条定位。

假设有一个这样的列表组件U，当我点击item7时,U会产生scrollTop值,同时U会被重新渲染。当我刷新页面时或者点击item5，scrollTop会自动变为0(点击item或刷新页面,U均会被重新渲染),而要实现的功能是刷新页面或点击当前可是范围内的其它item时，此组件仍维持当前的状态（scrollTop的值不改变），这需要维护scrollTop值，对滚动条定位。
假设index.js输出的页面的HTML结构是酱紫的：

因为要维护scrollTop值，我会建立一个scroll.js:

当点击item而组件U都会被重新渲染，界面会跟初始化一样,这样，就要记录之前点击的item。item.js代码如下:

当点击item时，就会更新curItem:

当然，还要监听U组件的scroll事件，去更新scrollTop值(b.js):

这样，当点击在当前可视范围内的item，scrollTop值就不会变：

当再次触发U组件的scroll事件时，b.js会更新scrollTop值。但是刷新页面时，所有数据都被初始化了，但在初始化页面中，能根据刷新前最后点击item的id来设置scrollTop：

这样，刷新页面后，U组件的状态仍是刷新之前的状态。需要注意的是，position()是根据最近定位的父元素计算距离的，所以U组件应该相对定位或者绝对定位：