使用按钮自定义滚动

Question

我正在努力实现以下寻找可以向上和向下滚动的框：

而不是侧面的滚动条。这可能是当他们点击向上箭头或将鼠标悬停在它上面时，它向上滚动并向下箭头相同吗？以及他们是否使用滚动按钮？

Answer 1

这只是一个简单的例子，我希望它可以帮到你。Fiddle

您需要的唯一代码jQuery是：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#prev').click(function(){
        $('li:last').detach().prependTo('ul').css({'margin-top':'-=100px'})
        $('li:first').stop().animate({'margin-top':'0px'},1000)
    })

    $('#next').click(function(){
        $('li:first').stop().animate({'margin-top':'-=100px'},1000,function(){
            $(this).detach().css({'margin-top':'0px'}).appendTo('ul')
            })
    })
})
</script>

如果您想构建纯css箭头，请访问此网站：link

您的结果将是fiddle

有时简单是最好的事情......

Answer 2

这个问题提供了一个用于在点击时滚动<div>元素的jQuery解决方案。 它似乎很灵活，因此您可以为每次单击自定义滚动步骤。

How to make a scrolable div scroll on click and mouseover using jQuery