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

Question

我有这个http://jsfiddle.net/utLytLmt/与自定义滚动与不同点滚动，我使用jQuery.scrollTo插件但没有选项来制作导航按钮（补充jQuery.serialScroll似乎只在点之间的距离相等时才会产生。

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

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

提前致谢。

Answer 1

我修改了你的小提琴 ，让它运作起来。

我开始将上面的代码更改为：

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的索引）

这允许您基于on计算出上一个或下一个点

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

尝试一下 （我假设“7130px”滚动点是错误的）

reduce函数reduce （找到下一个/前一个点）也是一样的： http ： //jsfiddle.net/y6rb17n0/3/

重要的提示

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

Answer 2

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

检查更新的演示

说明

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

然后，在下一个上一个/下一个按钮单击，检查存储的值，找到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);
    }
});