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

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

JS圖如下:

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