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

时间:2013-09-01 23:15:48

标签: javascript motion

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

3 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

假设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的顶部/左侧坐标。

答案 2 :(得分:-1)

使用scrollTo()方法。

developer.mozilla reference