Scroll button jQuery for scroll up and scroll down

Question

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.

Asef Hossini · Accepted Answer · 2021-09-27 09:02:55Z

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 complete solution, but could help you get started in the correct direction.

edited Sep 27, 2021 at 9:02

Asef Hossini

7631 gold badge9 silver badges11 bronze badges

answered Nov 21, 2016 at 10:13

winseybash

7023 gold badges12 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

RonyLoud · Accepted Answer · 2016-11-21 10:16:35Z

0

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

answered Nov 21, 2016 at 10:16

RonyLoud

2,4362 gold badges23 silver badges27 bronze badges

5 Comments

winseybash Over a year ago

This is not the functionality requested in the question. This will only create a scroll up button which will scroll to the top of the page. @Akash was asking for two buttons that could scroll up and down the page in increments, see my answer.

RonyLoud Over a year ago

@winseybash Akash asked for auto hide feature there

winseybash Over a year ago

He asked for auto hide if no items are available to display on the page, not if the page is scrolled to the top. Seeing as we have not been provided with any code it can be quite hard to implement this blind.

RonyLoud Over a year ago

have u checked fiddle provided. It has the body section as well with dummy data :)

Akash Over a year ago

@vispan i was looking for something where i can add two buttons to scroll which i can autohide if no items are left to show.

Collectives™ on Stack Overflow

Scroll button jQuery for scroll up and scroll down

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related