javascript - Scroll button jQuery for scroll up and scroll down - Stack Overflow

admin管理员组

文章数量:1396811

In my site i am having a list of items where i am using scroll bar to scroll the items.

Now i want to replace that bar with two buttons which working for scroll up and scroll down which can auto hide if there is not any item is available to display.

If is there any plugins are available please do let me know.

In my site i am having a list of items where i am using scroll bar to scroll the items.

Now i want to replace that bar with two buttons which working for scroll up and scroll down which can auto hide if there is not any item is available to display.

If is there any plugins are available please do let me know.

• javascript
• jquery
• jquery-plugins

Share Improve this question Follow asked Nov 21, 2016 at 10:03 AkashAkash 84033 gold badges1414 silver badges3838 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

scrollTop() can help you here. See the documentation

Example:

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


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

Obviously this is not a plete solution, but could help you get started in the correct direction.

Use this 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;
}

本文标签： javascriptScroll button jQuery for scroll up and scroll downStack Overflow