Question

我想使用一个名为“skiper”的按钮然后单击该按钮将窗口滚动到下一个标题元素。我不想每次都写在我想去的地方。

到目前为止，我试过了：

$(document).ready(function () {
    $(".skiper").click(function () {
        $('body').scrollTop($(nextInDOM(this, $('h'))));
        event.preventDefault();
    });     
});

我想这是完全错误的。

我正在使用两个插件：next-in-dom和scrollTo。

Answer 1

你可以这样解决：

$(document).ready(function () {
    var body = $('body');
    var headings = $('h1');
    var current = 0;

    $(".skipper").click(function (event) {
        ++current;

        if (headings.length > current) {
            body.animate( { scrollTop: headings.eq(current).position().top }, 200);
        }

        event.preventDefault();
    });
});

试试演示：http://jsfiddle.net/YqKTZ/

您可以根据需要调整headings的选择器。但是，每次用户单击按钮时，JavaScript都不必重新查询。

Answer 2

使用以下代码：

$(document).ready(function () {
    $(".skiper").click(function (event) {
        $('html, body').scrollTop($(this).nextInDOM($('h1, h2, h3, h4, h5, h6')).position().top);
        event.preventDefault();
    });     
});

Demo | Source

制作一个滚动到下一个标题的跳过按钮

2 个答案: