垂直滚动悬停而不是单击？jquery api

Question

我正在使用jQuery scrollTo在溢出的div中滚动内容。当我单击链接时，div将垂直滚动其内容。但是，我希望当我将鼠标悬停在链接上时，而不是单击它们时，会出现这种效果。

我不相信这是jQuery的scrollTo的一个选项。但是，对于hover事件，有一个jQuery API方法。

这看起来可能是一个简单的问题，但是有没有办法通过悬停而不是点击来保持"scrollTo“的垂直滚动功能呢？

垂直滚动：

jQuery(function ($) {
    $.localScroll.defaults.axis = 'y';
    $.localScroll({
        target: '#content',
        // could be a selector or a jQuery object too.
        queue: true,
        duration: 500,
        hash: false,
        onBefore: function (e, anchor, $target) {
            // The 'this' is the settings object, can be modified
        },
        onAfter: function (anchor, settings) {
            // The 'this' contains the scrolled element (#content)
        }
    });
});

悬停：

$("#page-wrap li.button").hover(function(){ /* vertically slide here? */ });V

Answer 1

使用scrollTo插件进行平滑滚动：

        $('#page-wrap li.button-down').hover(function(){
            var scrollDistance = $('body').scrollTop();
            var scrollHeight = $('#content').height();
            var windowHeight = $('body').height();
            var scrollSpeed = (scrollHeight - scrollDistance - windowHeight) * 2.5;  // higher than 2.5 is slower, lower is faster
            $('body').scrollTo('100%', scrollSpeed);
        },function(){
            $('body').stop().scrollTo('+=20px', 100);
            // stop on unhover
        });

这将向下滚动。使向上滚动按钮更简单

        $('#page-wrap li.button-up').hover(function(){
            var scrollDistance = $('body').scrollTop();
            var scrollSpeed = scrollDistance * 2.5;  // higher than 2.5 is slower, lower is faster
            $('body').scrollTo('0px', scrollSpeed);
        },function(){
            $('body').stop().scrollTo('-=20px', 100);
            // stop on unhover
        });

小提琴示例：http://jsfiddle.net/8Nkpr/1/