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

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

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

<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>