jquery button scroll on click

Question

I am making buttons, when hovered shows me border on specifiec items, which suits it's category. But I meet some problems, when there are more images, they are not visible on page, I have to scroll down.

My code right now looks

$(".cat1-button").hover(function () {
    $(".cat1").css("border", "4px solid #4f7b37");
});
$(".cat1-button").mouseleave(function () {
    $(".cat1").css("border", "4px solid #e7e7e7");
});

And I have to add a click state, which will be doing nothing more than "scroll to top of an button". How to do it ? I will try to explain this more:

I have buttons one under another, and when clicked I want to scroll to top of each -> so the button will be on my top screen. Like anchoring using a href="#cat1-button".

Sorry for my english.

Answer 1

UPDATED Check this DEMO : https://jsfiddle.net/yeyene/g9cg0jn3/2/

Add below scripts for all buttons click and now you are good to go, the page will scroll to each button that is clicked.

JQUERY

$("li[class*='-button']").click(function () {
    $('html,body').animate({ scrollTop: $(this).offset().top - 3 }, 500);
});

Answer 2

This code may work for you. What this basically does is, it finds the element #cat1-button and scrolls as the position of that element from top of the window. You can arrange this according to your needs.

$(window).scrollTop($('#cat1-button').offset().top);

You can find more on scrollTop() here