javascript - 使用 css 和 javascript 实现垂直滚动？ (用 fiddle )

Question

这是我的 fiddle :

http://jsfiddle.net/PTSkR/93/

我有一个可以滚动浏览的无序列表。

我正在尝试确定哪种方法最好:

1. 使用 CSS/jquery 将溢出设置为隐藏并移动 <ul> 的位置

执行此操作的最佳方法是什么？

代码:

<div class="span4 side-study-box">
            <div class="side-box-menu">
                <a class ="side-box-menu-nav"><i class="icon-chevron-up icon-white"></i></a>
                <ul>
                    <li>
                        <a class="side-box-menu-control"><i class="icon-facetime-video "></i></a>
                    </li>
                    <li>
                        <a class="side-box-menu-control"><i class="icon-picture"></i></a>
                    </li>
                    <li>
                        <a class="side-box-menu-control"><i class="icon-headphones "></i></a>
                    </li>
                    <li>
                        <a class="side-box-menu-control"><i class="icon-pencil "></i></a>
                    </li>
                    <li>
                        <a class="side-box-menu-control"><i class="icon-hdd"></i></a>
                        <!-- Need code, math, sound, url, text -->
                    </li>
                </ul>
                <a class ="side-box-menu-nav"><i class="icon-chevron-down icon-white"></i></a>
            </div>

        </div>

Answer 1

这个怎么样: http://jsfiddle.net/PTSkR/94/

您需要添加某种类型的点击绑定(bind)来向上或向下移动菜单和一个视口(viewport)来限制大小

动画时有很多选项，这是一个非常简单的示例，只能运行一次。点击绑定(bind)就像

$('.down').click(function () {
    var $move = $('.side-study-box ul');
    $move.css({
        top: '-20px'
    })
})

使用 jquery 尝试获取元素位置

var position = $move.position();