滚动按钮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; 
}