按鈕滾動

我想滾動文本內的.text，當我點擊.down。我有一個隱藏溢出的簡單文本。我這裏的例子：http://jsbin.com/ofaquh/1/edit 按鈕滾動

我一直在尋找到jQuery的scrollTo功能，但我想我不知道如何使用得好：

$(function(){  
    $(".down").click(function() { 
     $(".text").scrollTo(20); 
    }); 
})

2012-12-19 Nrc

可能重複（http://stackoverflow.com/questions/8047454/jquery-animate -scroll） – Blazemonger

.scrollTo()實際上是一個插件。

您可以使用.animate()和scrollTop，並達到相同的結果：

$(".down").click(function() { 
    $(".text").animate({ scrollTop: 200 }); 
});

2012-12-19 18:14:40

['。.scrollTo'是第一個香草JS]（https://developer.mozilla.org/en-US/docs/DOM/window.scrollTo）我仍然一直在困惑他們。 – Blazemonger

關於使用'.animate'最好的事情是你可以使用''+'20''而不是'20'來保持滾動。 [小提琴]（http://jsfiddle.net/mblase75/jg4AS/） – Blazemonger

哎呀不小心刪除了我的評論哈哈。是的，我喜歡在飛行中增加/減少的能力。 –

除非您使用的scrollTo插件我想你想用jQuery的scrollTop函數。

例：$(".text").scrollTop(20);

或者，以響應在評論你的問題，請嘗試：

var move = 20;  
$(".down").click(function() { 
    $(".text").scrollTop(move); 
     move += 20; 
});

2012-12-19 18:13:38 j08691

就是這樣！我每次點擊時如何滾動20px？ – Nrc

更改函數以使用變量增加scrollTop。看到我更新的答案和這個jsbin http://jsbin.com/ofaquh/11/edit。 – j08691

您的解決方案非常棒。我嘗試添加向上按鈕，但當它到達底部時有一些異常現象，它不能再次上升：http://jsbin.com/ofaquh/12/edit – Nrc

使用scrollTop()

$(function(){ 

$(".down").click(function() { 
    $(".text").scrollTop(20); 
}); 

})

參見：http://jsfiddle.net/AWQzg/1/對於每個20像素的重複滾動單擊[jQuery的動畫滾動]

$(function(){ 

$(".down").click(function() { 
    $(".text").scrollTop($(".text").scrollTop() + 20); 
}); 

})

2012-12-19 18:14:57 Anujith

您的回答非常好，謝謝。感謝你，我也可以使用向上按鈕：http://jsfiddle.net/AWQzg/3/是否有可能以如此簡單的方式創建完整的滾動條？ – Nrc

回答