Question

我想创建一个Jquery脚本，只要用户点击，它就会向下滚动到下面的下一个div。

我从顶部有一个每个DIV的像素偏移数组我不知道如何循环或计算点击次数。

jQuery(document).ready(function(){
    var move=[0,642,1725,2393,3036,6097,6991];
    var i=0;
    var duration = 500;

    jQuery(".next").click(function(){
        //event.preventDefault();

        jQuery('html, body').animate({scrollTop: move[i]+'px'}, duration);   
    })      
});

Answer 1

只需在处理程序中递增它吗？

$(function() {
    var move=[0,642,1725,2393,3036,6097,6991],
        i = 0,
        duration = 500;

    $('.next').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({scrollTop: move[i]+'px'}, duration);
        i++;
    });
});

我很想让jQuery获取你想要滚动到的元素的offset().top位置，否则你每次修改代码或内容时都需要更改数组值...

您还可能需要在函数回调中进行一些检查以避免溢出：

$(function() {
    var move=[0,642,1725,2393,3036,6097,6991],
        i = 0,
        duration = 500;

    $('.next').on('click', function(e) {
        e.preventDefault();
        if(i < move.length)
        {
            $('html, body').animate({scrollTop: move[i]+'px'}, duration);
            i++;
        }
    });
});

Answer 2

尝试i = (i == 7)?i=0:i;和move[i++]

jQuery(document).ready(function () {
    var move = [0, 642, 1725, 2393, 3036, 6097, 6991];
    var i = 0;
    var duration = 500;
    jQuery(".next").click(function () {
        //event.preventDefault();
        i = (i == 7)?i=0:i;
        jQuery('html, body').animate({
            scrollTop: move[i++] + 'px' //set current value and increment it by 1
        }, duration);
    })
});

单击时向下滚动的脚本

2 个答案: