0

我正在使用 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
4

1 回答 1

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/

于 2012-03-08T23:14:18.877 回答