實作點選按鈕，滾動條滾動

最近要做這個點選滾動條滾動的功能，一開始就覺得挺簡單，就讓srcollTop()的值上下變動就行了嘛，之後發現我還得知道滾動條到達頂部了沒，不然點選向上滾動的時候就會報錯。是以需要擷取到元素的完整高度scrollHeight，通過内部高度+srcollTop()是否大于scrollHeight，來判斷滾動條是否要滾動接下來直接上代碼。

JQ部分

<script type="text/javascript" src="JS/jquery.min.js"></script>
<script>
$(function(){
	var con=document.getElementById('slide').scrollHeight;  //擷取ul的完整的高度
	var wai=$('#slide').height();
	var scr=0;
	$('.bt_sta').click(function(){
		var scr=$('#slide').scrollTop(); //點選的時候擷取滾動條的垂直位置
		if(scr>0){
			scr-=30;
			$('#slide').scrollTop(scr);  //滾動條的垂直位置向上30px
		}
		else{
			alert('已經到頂部了');
		}	
	})	
	$('.bt_nex').click(function(){
		var scr=$('#slide').scrollTop(); 
		if(scr+wai<con){
			scr+=30;
			$('#slide').scrollTop(scr);
		}
		else{
			scr=con-wai;
			alert('已經到底部了');
		}	
	})
})
</script>
           

Html部分

<div class="lk_news">
	<div class="bt_sta"></div>
	<div class="new_hd">
    	<h2>暴走大事件</h2>
    </div>
    <div class="new_ct">
    	<ul id="slide">
        	<li>
                <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><i>1.</i>近日，某男子踩刹車踩成油門，竟飙上了路旁的房屋的房頂</a>
                <span>2017-03-15</span>
            </li>
            <li>
                <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><i>2.</i>315來了，今年又有多少假貨要被曝光</a>
                <span>2017-03-15</span>
            </li>
            <li>
                <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><i>3.</i>兩會期間，陳道明宋丹丹等人對小鮮肉表示出不滿</a>
                <span>2017-03-15</span>
            </li>
            <li>
                <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><i>4.</i>張國立被記者圍住，隻為求知他口中的台獨分子是誰</a>
                <span>2017-03-15</span>
            </li>
            <li>
                <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><i>5.</i>男子酒店房間内撿到手機，欲歸還時被當騙子</a>
                <span>2017-03-15</span>
            </li> 
                        <li>
                <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><i>6.</i>男子無證駕駛為躲檢查兩次沖卡 拖行交警被刑拘</a>
                <span>2017-03-22</span>
            </li>
            <li>
                <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><i>7.</i>寵物狗重45斤險些胖死 減肥16斤後“判若兩狗”</a>
                <span>2017-03-22</span>
            </li>
            <li>
                <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><i>8.</i>11名大學生當職業農民 收入最高者年薪30萬</a>
                <span>2017-03-22</span>
            </li>                        
            <div style="clear:both;"></div>
        </ul>
    </div>
    <div class="bt_nex"></div>
</div>