Question

我有这个http://jsfiddle.net/utLytLmt/带有不同点的自定义滚动滚动到，我使用jQuery.scrollTo插件但没有选项来制作导航按钮（补充jQuery .serialScroll似乎仅适用于点之间的距离相等的情况。）

有没有办法让这些下一个和前一个按钮移动到各个部分之间？

<button id="next">Next</button> | <button id="prev">Previous</button>

提前致谢。

Answer 1

我modified your fiddle让它运转起来。

我首先将您的代码更改为：

var scrollPoint = [70, 130, 210, 360, 445, 580, 7130, 816, 933, 1000];
var scrollDuration = 2500;

$("input[type=button]").each(function (index) {
    $(this).click(function () {
        $("body").scrollTo(scrollPoint[index] +  "px", scrollDuration);
    });
});

（而不是像这里使用按钮索引，最好使用hrefs或数据属性作为scrollPositions的索引）

这允许您根据

计算出上一个或下一个点

var scrollPosition = $(window).scrollTop();
//sometimes scroll position is 69.9995... We want it to be 70:
scrollPosition = Math.round(scrollPosition);

Try it out （我假设“7130px”滚动点是错误的）

使用简化的reduce函数（找到下一个/上一个点）也是如此：http://jsfiddle.net/y6rb17n0/3/

重要提示

身高为1000像素的身体可以滚动到1000 - $(window).height()（因此这组scrollPoints的身体需要更大。）

Answer 2

我建议使用data属性作为偏移量并执行此操作：

检查UPDATED DEMO

<强>说明

每次单击输入或上一个/下一个按钮时，将目标偏移存储到隐藏输入。

然后，在下一个上一个/下一个按钮单击，检查存储的值，找到data-top等于存储值的输入并找到上一个或下一个元素并使用新的触发滚动元素的data-top值。

更新演示

HTML

<input type="button" value="Click Me1" class="next1" data-top="70">
....

的jQuery

$(document).on('click', 'input:not(#stored)', function() {
    var that = $(this);
    var t = that.attr('data-top');
    $('#stored').val(t);
    $("body").scrollTo(t + 'px', 2500);
});

$(document).on('click', '#btnHolder > button', function() {
    var that = $(this);
    var id = that.attr('id');
    var stVal = $('#stored').val();
    //console.log(stVal);
    if (stVal) {
        if (id == 'next') {
            var tp = $('[data-top="' + stVal + '"]').next().attr('data-top');        
        } else if (id == 'prev') {
            var tp = $('[data-top="' + stVal + '"]').prev().attr('data-top');        
        }
        console.log($('[data-top="' + stVal + '"]').next().attr('data-top'));
        $("body").scrollTo(tp + 'px', 2500);
        $('#stored').val(tp);
    }
});

如何为此自定义滚动添加下一个和上一个按钮？

2 个答案: