在网站制作中，首页一般□□都会有新□□□闻推荐列□□□表之类的，页面布局♦时，新闻列表□□□给的区域※大小不够□□或者预估□□□□以后上传◥内容很多，这时前端□□□□人员需要□□□做出隐藏□□□多出的内□□□□容上下滑□□□动显示剩□□□□余的内容，前端人员□□做出这样□□□□的效果时，就会出现□□滚动条影□□□响美观，一般我们□□□会隐藏掉□□□□滚动条，但这样又□□□□不突出这□□□□里的内容◤时可以上·下滚动的，所以需要□□□□有上下两□□个按钮来□□提示我们□□这里是可□□□□以做上下□□滚动显示□□□□其内容的。
效果图如下：

如图所示□□□□左边写了▽个类似新◇闻的列表，默认显示3个，右边是控★制其上下☆的两个按□□钮。
HTML图如下：

JS图如下:

 
通过“var scroll = $(".quick-links .roll").height()”获取外层□□的高度，这个高度●是先设定□□好的，也就是显□□□□示的区域□□□高度，然后“var scroll_Ul = $(".quick-links .roll ul").height()”获取实际□□□内容的高□□度，就是每一□□条新闻列□□表加起来□□的总高度，通过if判断当前丨的内容总△高度有没□□□有大于显□□□□示区域的◎高度（没有大于□□□□显示区域□□的高度就◇不用滚动○显示了），当大于显□□示高度时，点击往下□□按钮，通过“var scroll_Top = $('.quick-links .roll').scrollTop()”获取var scroll_Ul顶部距离scroll顶部的距♦离，“scroll_Top = scroll_Top + 44”这个值是□□□□每次点击□□□□往下按钮□□□所累加的□□□值，因为这里◢列表每一•条的高度□□是44，所以每次□□加44，最后通过animate动画来滚□□动。往上按钮□□也是一样□□□的道理。
滚动的效果如图：