在網(wǎng)站制作中，首頁一般都會有新聞推薦列表之類的，頁面布局時，新聞列表給的區(qū)域大小不夠或者預估以后上傳內(nèi)容很多，這時前端人員需要做出隱藏多出的內(nèi)容上下滑動顯示剩余的內(nèi)容，前端人員做出這樣的效果時，就會出現(xiàn)滾動條影響美觀，一般我們會隱藏掉滾動條，但這樣又不突出這里的內(nèi)容時可以上下滾動的，所以需要有上下兩個按鈕來提示我們這里是可以做上下滾動顯示其內(nèi)容的。
效果圖如下：

如圖所示左邊寫了個類似新聞的列表，默認顯示3個，右邊是控制其上下的兩個按鈕。
HTML圖如下：

JS圖如下:

 
通過“var scroll = $(".quick-links .roll").height()”獲取外層的高度，這個高度是先設(shè)定好的，也就是顯示的區(qū)域高度，然后“var scroll_Ul = $(".quick-links .roll ul").height()”獲取實際內(nèi)容的高度，就是每一條新聞列表加起來的總高度，通過if判斷當前的內(nèi)容總高度有沒有大于顯示區(qū)域的高度（沒有大于顯示區(qū)域的高度就不用滾動顯示了），當大于顯示高度時，點擊往下按鈕，通過“var scroll_Top = $('.quick-links .roll').scrollTop()”獲取var scroll_Ul頂部距離scroll頂部的距離，“scroll_Top = scroll_Top + 44”這個值是每次點擊往下按鈕所累加的值，因為這里列表每一條的高度是44，所以每次加44，最后通過animate動畫來滾動。往上按鈕也是一樣的道理。
滾動的效果如圖：