Question

HTML：

<div id="scrooly" class="span7">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet quam et orci dictum sagittis. In hac habitasse platea dictumst. Morbi sed dictum nibh. Nullam felis est, feugiat a ullamcorper sed, iaculis ut ligula. Aliquam erat volutpat. Nam in sapien magna, in feugiat velit. Quisque tellus est, ultricies a euismod sed, consectetur et libero. Quisque ac libero in elit suscipit semper. Cras eget metus quis turpis ultrices aliquam sed at enim. Integer ullamcorper odio consequat nunc egestas tempus. Cras eget orci elit, ac eleifend nunc. Phasellus tincidunt nibh arcu. Donec laoreet ornare nisl, sit amet rutrum sem mollis sed.
    </p>
    <img src="assets/img/photo01.jpg" />
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet quam et orci dictum sagittis. In hac habitasse platea dictumst. Morbi sed dictum nibh. Nullam felis est, feugiat a ullamcorper sed, iaculis ut ligula. Aliquam erat volutpat. Nam in sapien magna, in feugiat velit. Quisque tellus est, ultricies a euismod sed, consectetur et libero. Quisque ac libero in elit suscipit semper. Cras eget metus quis turpis ultrices aliquam sed at enim. Integer ullamcorper odio consequat nunc egestas tempus. Cras eget orci elit, ac eleifend nunc. Phasellus tincidunt nibh arcu. Donec laoreet ornare nisl, sit amet rutrum sem mollis sed.
    </p>
</div>

我的所有结构：

http://jsfiddle.net/2FcZN/

它工作正常，但我想要，滚动条上的向上和向下按钮。我怎么能这样做？

Answer 1

您可以使用以下内容：

创建2个按钮：

<button id='upClick'>Go Up</button>
<button id='downClick'>Go Down</button>

jQuery的：

var scrolled = 0;
$("#downClick").on("click", function() {
    scrolled = scrolled + $("#scrooly").scrollHeight; //Edit <<
    $("#scrooly").animate({
        scrollTop: scrolled
    });
});


$("#upClick").on("click", function() {
    scrolled = scrolled - $("#scrooly").scrollHeight; //Edit <<

    $("#scrooly").animate({
        scrollTop: scrolled
    });
});

更新了小提琴：http://jsfiddle.net/2FcZN/3/

我希望这有帮助！

Answer 2

尝试将底部设置为24px，作为页脚的高度

在jQuery滚动插件上添加/减少按钮

2 个答案: