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

Question

i have this http://jsfiddle.net/utLytLmt/ with a custom scroll with differents points to make scroll to, i'm using the jQuery.scrollTo plugin but there is not an option to make navigation buttons (the complementary jQuery.serialScroll seems to be made only for when the distance between points is equal).

is there a way to make these next and previous buttons to move betweeen the sections?

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

Thanks in advance.

Answer 1

I've modified your fiddle to get it working.

I started by changing your code above to this:

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);
    });
});

(rather than using the button index as here, it would be better to use hrefs or data attributes as indexes to your scrollPositions though)

This allows you to figure out the previous or next point based on on

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

Try it out (I've assumed the "7130px" scroll point is a mistake)

Here is the same thing with a reduced reduce function (which finds the next/previous point): http://jsfiddle.net/y6rb17n0/3/

Important Note

A body with a height of 1000px can scroll to 1000 - $(window).height() (so your body needs to be larger for this group of scrollPoints ).

Answer 2

I would suggest using data attributes for the offset and do this:

Check the UPDATED DEMO

EXPLANATION

Every time you click on an input or prev/next button, store the target offset to a hidden input.

Then, on the next prev/next button click, check for the stored value, find the input that has a data-top equal to the stored value and find the previous or next element and trigger the scroll with the new element's data-top value.

UPDATED THE DEMO

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);
    }
});