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

Question

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

Answer 1

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

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

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

您可能想要选择一个特定的产品详细信息 div（与单击的产品相关的），但此代码可以实现目的。

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

Answer 2

您可以使用 jQuery 来完成这两项工作。

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

大致思路是点击产品（滚动到您想要的位置）后触发滚动方法，然后使用 animate 打开产品详细信息。

Answer 3

使用 scrollTo() 方法。

developer.mozilla 参考资料。