滚动按钮答案

【问题标题】：Button to scroll滚动按钮
【发布时间】：2012-12-19 18:09:25
【问题描述】：

当我单击 .down 时，我正在尝试滚动 .text 中的文本。我有一个隐藏溢出的简单文本。我这里有例子：http://jsbin.com/ofaquh/1/edit

一直在看jquery的scrollTo函数，但是我觉得不知道怎么用好：

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

【问题讨论】：

【解决方案1】：

见小提琴：http://jsfiddle.net/AWQzg/

使用scrollTop()

$(function(){

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

})

请参阅：http://jsfiddle.net/AWQzg/1/，每次点击重复滚动 20 像素

$(function(){

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

})

【讨论】：

【解决方案2】：

.scrollTo()实际上是一个插件。

您可以使用.animate() 和scrollTop 并获得相同的结果：

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

【讨论】：

.scrollTo was vanilla JS first. 我还是一直把他们弄糊涂了。
使用.animate 的最大好处是您可以使用'+=20' 而不是20 来保持滚动。 fiddle
哎呀不小心删除了我的评论哈哈。是的，我喜欢动态加/减的能力。
你的回答太棒了！它是如此干净和容易。我在这里也添加了向上按钮：jsbin.com/ofaquh/12/edit 有没有像这样简单的方法来添加条或参考以了解文本的长度？
我不知道。我只是想学习新事物并改进这一点

【解决方案3】：

除非您使用的是 scrollTo 插件，否则我认为您想使用 jQuery 的 scrollTop 函数。

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

或者，在 cmets 中回答您的问题，尝试：

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

【讨论】：