1

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

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. enter image description here

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

2 Answers 2

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.

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

Comments

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

5 Comments

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.
@winseybash Akash asked for auto hide feature there
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.
have u checked fiddle provided. It has the body section as well with dummy data :)
@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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.