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/

垂直滚动而不是点击？ jquery api

1 个答案: