滾動按鈕jQuery向上滾動並向下滾動

Question

在我的網站我有我正在使用滾動條滾動項目的項目列表。

現在我想用兩個按鈕來替換那個條，這兩個按鈕用於向上滾動並向下滾動，如果沒有任何項目可以顯示，可以自動隱藏。

如果有任何插件可用，請讓我知道。

Answer 1

scrollTop()可以幫助你在這裏。見the documentation

例子：

$('.scroll-up-button').on('click', function() { 
    var scrollIndex = $(window).scrollTop(); // current page position 
    $(window).scrollTop(y - 150); // scroll up 150px 
} 


$('.scroll-down-button').on('click', function() { 
    var scrollIndex = $(window).scrollTop(); // current page position 
    $(window).scrollTop(y + 150); // scroll down 150px 
} 

顯然，這不是一個完整的解決方案，但應該可以幫助您在正確的方向開始。

Answer 2

使用此fiddle

JS：

$(window).scroll(function(){ 
     if ($(this).scrollTop() > 100) { 
      $('.scrollToTop').fadeIn(); 
     } else { 
      $('.scrollToTop').fadeOut(); 
     } 
    }); 

    //Click event to scroll to top 
    $('.scrollToTop').click(function(){ 
     $('html, body').animate({scrollTop : 0},800); 
     return false; 
    }); 

HTML：

<a href="#" class="scrollToTop">Scroll To Top</a> 

CSS：

.scrollToTop{ 
    width:100px; 
    height:130px; 
    padding:10px; 
    text-align:center; 
    background: whiteSmoke; 
    font-weight: bold; 
    color: #444; 
    text-decoration: none; 
    position:fixed; 
    top:75px; 
    right:40px; 
    display:none; 
} 
.scrollToTop:hover{ 
    text-decoration:none; 
}