Прокрутка кнопки 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; 
}