需要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);
    });
});

检查我的小提琴：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);
    });    

});

但是，您可以尝试创建一个类似滚动（方向）的功能 - 这将使您的代码更短，更好阅读。

Answer 2

您可以使用div.scrollTop(pos - count);，因为您将获得此行var pos = div.scrollTop();的当前滚动顶部位置，因此您可以减少scrollTop()中传递的值

interval = setInterval(function(){
        count = count || 1;
        var pos = div.scrollTop();
        div.scrollTop(pos - count);
    }, 10);

＆＃13;

＆＃13;

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

    $(".ca-top").on('mouseover', function() {
    debugger;
        var div = $('.box');

        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);
    });
    
    $(".ca-bottom").on('mouseover', function() {
        var div = $('.box');

        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);
    });
})
;

＆＃13;

.con {
	width: 300px;
	height: 300px;
	position: relative;
}
.box {
	width: 100%;
	max-height: 300px;
	background: #eee;
	overflow:hidden
}
.cat-nav {
	width: 100%;
	background: transparent;
	position: absolute;
	bottom: 0;
	left: 0;
    right: 0;
	text-align:center;
	color:#fff;
	cursor:pointer
}
.cat-nav a {
	width:50%;
	float:left;
	padding:10px 0;
	display:block
}
.cat-nav .ca-top {
	background:#d8aa22
}
.cat-nav .ca-bottom {
	background:#333
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="con">
  <div class="box"> content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
  </div>
  <div class="cat-nav">
      <a class="ca-top">down</a><a class="ca-bottom">up</a>
      </div>
</div>

＆＃13;

＆＃13;

＆＃13;