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

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

演示| 资源