点击时按钮向顶部移动

Question

我在这个link有一个实时网站。在特色产品类别下的主页中，您可以看到有一些产品。在每个产品下都有一个名为add to cart的按钮。现在，当你点击添加到购物车按钮，然后你可以看到按钮将跳转到顶部，我使用铬浏览器，所以检查它。那么有人可以告诉我如何解决这个问题。帮助和建议将是值得的。感谢

更新

因为我使用了position：absolute，这用于使该行中的所有按钮排成一行。因此，如果您要提出删除建议，请记住，我必须保持所有这些按钮对齐。

Answer 1

添加：

a.button:active{
    top:inherit;
}

在你的CSS结束时。

Answer 2

从

中删除position:absolute 来自style.css的第2178行

div＃content ul.products li.product a.add_to_cart_button  并设置一些其他风格。

Answer 3

assets / css / woocommerce.css 中的此规则导致了此问题。它通过将top的值设置为 1 来拉伸处于活动状态的按钮，使其占据100％的高度，同时它已将bottom设置为 0 像素。所以，删除这个规则，你应该没事。

a.button:active, button.button:active, input.button:active, #respond input#submit:active, #content input.button:active {
    top: 1px;
}

---

修改

另一个脏解决方案是覆盖处于活动状态的“添加到购物车”按钮的top属性。将此规则添加到样式表中，它也可以解决您的问题

.add_to_cart_button:active{
  top:auto!important;  /*Forces the top to it's default value*/
}