0

I have this piece of code in my mvc view where htmlcollection is a collection of many tables containing 4 rows each. Each table has a height of 40 px.

         var scrollWindow = $('<div>', {
                id: "scroll-window",
                html: htmlCollection
            });

        <style>
           #scroll-window {
           height: 655px;
           width: inherit;
           overflow-y: auto;
           }
          </style>

         $('#divCateringPX').append(scrollWindow);

I also have a button in my view on clicking which I want to scroll down a multiple of 40 px in divCateringPX. This question looks simple, but I am new to jquery and stuck. Kindly help.

Thanks.

4

1 回答 1

1

您所要做的就是为按钮附加一个单击事件，该事件会回调一个在 div 内滚动的函数，如下所示：

var m=1,
    pos;

$("#button").click(function(){

    pos = $("#divCateringPX").scrollTop();

    $("#divCateringPX").animate({
        scrollTop: pos + 40*m
    }, 1500);

});

1500 是以毫秒表示的动画持续时间。上面的代码每次点击会向下滚动 40px。如果要向下滚动像素数等于 40 的倍数，只需将m变量更改为所需的倍数即可。

哦，顺便说一句，你应该scrollTop不只是将属性设置为 40px，而是设置为初始滚动位置加上40px。如果你没有这样做，它只会在第一次工作。之后，它会scrollTop每次都将属性设置为 40，这根本没有任何作用。我编辑了我的代码。

于 2014-04-07T15:13:53.193 回答