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

How to add next and previous buttons for this custom scroll?

本文关键字：下一个 上一个 按钮 添加 滚动 自定义      更新时间：2023-09-26

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

有没有办法让下一个和上一个按钮在各个部分之间移动？

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

提前谢谢。

我修改了你的小提琴，让它工作。

我开始把你上面的代码改成这样：

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或数据属性作为滚动位置的索引）

这允许您根据计算上一点或下一点

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

试试（我认为"7130px"滚动点是个错误）

这与简化的reduce函数（查找下一个/上一个点）是一样的：http://jsfiddle.net/y6rb17n0/3/

重要提示

高度为1000px的身体可以滚动到1000 - $(window).height()（因此对于这组scrollPoints，你的身体需要更大）。

我建议使用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);
    }
});
相关文章：