events - jquery button scroll on click -

i making buttons, when hovered shows me border on specifiec items, suits it's category. meet problems, when there more images, not visible on page, have scroll down.

my code right looks

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

and have add click state, doing nothing more "scroll top of button". how ? try explain more:

i have buttons 1 under another, , when clicked want scroll top of each -> button on top screen. anchoring using href="#cat1-button".

sorry english.

updated check demo : https://jsfiddle.net/yeyene/g9cg0jn3/2/

add below scripts buttons click , go, page scroll each button clicked.

jquery

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