如何使用jquery增加滾動條頂部？

我試圖在每次點擊後增加滾動條頂部併爲此編寫它，但它只是第一次運行。在每次調用x的值爲30時，我該如何解決它？如何使用jquery增加滾動條頂部？

我嘗試在W3Schools的網站和它的作品有

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> 
</script> 
<script> 
$(function() { 
     $("#btncl").click(function (e) { 
      var x = $("div").scrollTop() + 30; 
      $("div").scrollTop(x); 

     }); 
    }); 
</script> 

<body> 
<form id="form1" runat="server"> 
<div style="border: 1px solid black; height: 150px; overflow: auto"> 
    <ul> 
     <li> 
      <img width="80px" style="margin-bottom: 5px;" height="70px" alt="" class="img_gallery" 
       src="Images_slider/1.jpg" /> 
     </li> 
     <li> 
      <img width="80px" style="margin-bottom: 5px;" height="70px" alt="" class="img_gallery" 
       src="Images_slider/2.jpg" /> 
     </li> 

    </ul> 
</div> 
<br> 
    <input type="button" value="Return the vertical position of the scrollbar" id="btncl"> 

</form>

來源

2013-06-05 Farkhonde

工作對我來說很好 - > http://jsfiddle.net/tZLVb/ – adeneo

是的，它在那裏工作，但不能在我的asp.net的表格中工作 – Farkhonde

嘗試之前解除綁定（'點擊'），並檢查是否有錯誤或嘗試與scrollTo（）方法 – Sidux

試着這麼做

$(function() { 
    var x = $("div").scrollTop(); 
    $("#btncl").click(function (e) { 
     x += 30; 
     $("div").scrollTop(x); 
    }); 
});

或

$(function() { 
    var incr = 0; 
    $("#btncl").click(function (e) { 
     incr += 30; 
     var x = $("div").scrollTop() + incr; 
     $("div").scrollTop(x); 
    }); 
});

來源

2013-06-05 08:24:31

謝謝you.it工作 – Farkhonde

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

或？

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

來源

2013-06-05 08:13:33

這兩個工作 – Farkhonde

@Farkhonde是的，在服務器中的第一個資源可以請求爲'http://ajax.googleapis.com/ajax/libs/ jquery/1.9.1/jquery.min.js'，我在文件系統中測試它，所以它的請求爲'file：// ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' :) –

@Farkhonde可能是你的代碼與你的問題中的代碼不相同，因爲它可以在我的電腦中的所有瀏覽器上正常工作，就像WhyMe說的那樣，給'div'一個id。 –

似乎爲我工作的，請參閱以下jsFiddle。

的Html

<div id='abcd' style="border: 1px solid black; height: 150px; overflow: auto"> 
    <ul> 
     <li> 
      <img width="80px" style="margin-bottom: 5px;" height="70px" alt="" class="img_gallery" 
       src="Images_slider/1.jpg" /> 
     </li> 
     <li> 
      <img width="80px" style="margin-bottom: 5px;" height="70px" alt="" class="img_gallery" 
       src="Images_slider/2.jpg" /> 
     </li> 

    </ul> 
</div> 
<br> 
    <input type="button" value="Return the vertical position of the scrollbar" id="btncl" />

的Javascript

document.body.onclick=function(e){console.log('ok');$('#abcd').scrollTop($('#abcd').scrollTop() +30);}

來源

2013-06-05 08:15:41 WhyMe

顯然:)單擊該框以顯示滾動。 – WhyMe

如何使用jquery增加滾動條頂部？

回答

相關問題