如何创建这个滑动JS动作？

Question

我无法在http://makr.com/上找到如何创建此动作 - 当您点击某个产品时，该页面会向下滑动并显示更多产品信息。滚动条还会滚动到产品/信息适合整个页面的位置。有人可以帮助我或指出我正确的方向吗？

Answer 1

你可以使用jQuery做到这两点。

• 对于开放产品的方式：http://api.jquery.com/animate/
• 对于滚动，您可以查看此页面：http://api.jquery.com/scroll/

一般的想法是在您点击产品（滚动到您想要的位置）后触发滚动方法，然后使用动画打开产品详细信息。

Answer 2

假设ul.products li.product选择器选择列表中的每个产品。 假设div.product-detail选择器选择对应的产品详细信息容器

$(".ul.products li.product").click(function() {

    $('div.product-detail').slideDown(function() {
        $(window).scrollTop($(this).offset().top);
    });
});

您可能希望选择特定的产品详细信息div（与所点击的产品相关的产品详细信息div），但此代码可以实现此目的。

offset属性为您提供产品详细信息div的顶部/左侧坐标。

Answer 3

使用scrollTo（）方法。

developer.mozilla reference