Question

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

我的代码现在看起来

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

我必须添加一个点击状态，它只会执行＆＃34;滚动到按钮顶部＆＃34;。怎么做？我将尝试更多解释：

我有一个在另一个下面的按钮，当点击时我想滚动到每个按钮的顶部 - ＆gt;所以按钮将在我的顶部屏幕上。就像使用href =＆＃34;＃cat1-button＆＃34;锚定一样。

抱歉我的英文。

Answer 1

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

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

JQUERY

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

Answer 2

此代码可能适合您。这基本上做的是，它找到元素＃cat1-button并从窗口顶部滚动为该元素的位置。您可以根据自己的需要进行安排。

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

You can find more on scrollTop() here

单击jquery按钮滚动

2 个答案:

JQUERY