javascript - 需要 Jquery 按钮鼠标悬停滚动到顶部

Question

我使用了overflow:hidden 样式来隐藏所有浏览器中的滚动条。并为向下滚动内容的按钮添加了 jquery 函数，它工作正常。我需要应用滚动顶部功能到其他按钮或需要添加mousescroll

$(document).ready(function() {
    var count;
    var interval;

    $(".ca-top").on('mouseover', function() {
        var div = $('.navbar-nav.categories');

        interval = setInterval(function(){
            count = count || 1;
            var pos = div.scrollTop();
            div.scrollTop(pos + count);
        }, 10);
    }).click(function() {
        if (count < 6) {
             count = count+1;
        }
    }).on('mouseout', function() {
        // Uncomment this line if you want to reset the speed on out
        count = 0;
        clearInterval(interval);
    });
});

检查我的 fiddle :https://jsfiddle.net/vuer5oyu/

Answer 1

https://jsfiddle.net/9Luvrvc1/1/

您可以只使用相同的代码，在计数器函数处加上一个减号:

$(document).ready(function() {
    var count;
    var interval;

    $(".ca-top").on('mouseover', function() {
        var div = $('.navbar-nav.categories');

        intervalDown = setInterval(function(){
            count = count || 1;
            var pos = div.scrollTop();
            div.scrollTop(pos + count);
        }, 10);
    }).click(function() {
        if (count < 6) {
             count = count+1;
        }
    }).on('mouseout', function() {
        // Uncomment this line if you want to reset the speed on out
        count = 0;
        clearInterval(intervalDown);
    });

    $(".ca-bottom").on('mouseover', function() {
        var div = $('.navbar-nav.categories');

        intervalUp = setInterval(function(){
            count = count || 1;
            var pos = div.scrollTop();
            div.scrollTop(pos - count);
        }, 10);
    }).click(function() {
        if (count > 6) {
             count = count-1;
        }
    }).on('mouseout', function() {
        // Uncomment this line if you want to reset the speed on out
        count = 0;
        clearInterval(intervalUp);
    });    

});

但是，您可以尝试创建一个类似 scroll(direction) 的函数 - 这将使您的代码更短，更易读。