jquery 按钮在点击时滚动

Question

我正在制作按钮，当鼠标悬停时会显示特定项目的边框，这适合它的类别。但是我遇到了一些问题，当有更多图片时，它们在页面上不可见，我必须向下滚动。

我的代码现在看起来像

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

而且我必须添加一个点击状态，它只会做 "scroll to top of an button"。怎么做？我将尝试对此进行更多解释：

我有一个按钮在另一个按钮下，单击时我想滚动到每个按钮的顶部 -> 这样按钮就会出现在我的顶部屏幕上。就像使用 href="#cat1-button" 锚定一样。

对不起我的英语。

Answer 1

此代码可能对您有用。这基本上做的是，它找到元素 #cat1-button 并从 window 顶部滚动到该元素的位置。大家可以根据自己的需要来安排。

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

You can find more on scrollTop() here

Answer 2

已更新 检查此演示：https://jsfiddle.net/yeyene/g9cg0jn3/2/

为所有按钮添加以下脚本点击，现在您可以开始了，页面将滚动到每个被点击的按钮。

JQUERY

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

jquery 按钮在点击时滚动

jquery button scroll on click

jquery

events

scroll

click

JQUERY