滚动到div并将活动类添加到当前div的选项卡

Question

我有7个标签

<div class="header">
    <input id="example1" type="submit" name="script"  value="Tab 1">
    <input id="example2" type="submit" name="script"  value="Tab 2">
    <input id="example3" type="submit" name="script"  value="Tab 3>
    <input id="example4" type="submit" name="script" value="Tab 4">
    <input id="example5" type="submit" name="script"  value="Tab 5">
    <input id="example6" type="submit" name="script"  value="Tab 6">
    <input id="example7" type="submit" name="script"  value="Tab 7">
</div>
<div id="outputs">
    <div id="output1" style="height:auto; text-align:left;">Some long text</div>
    <div id="output2" style="height:auto; text-align:left;">Some long text</div>
    <div id="output3" style="height:auto; text-align:left;">Some long text</div>
    <div id="output4" style="height:auto; text-align:left;">Some long text</div>
    <div id="output5" style="height:auto; text-align:left;">Some long text</div>
    <div id="output6" style="height:auto; text-align:left;">Some long text</div>
    <div id="output7" style="height:auto; text-align:left;">Some long text</div>
</div>

jQuery代码是

$("#example1").click(function() {
    $(".single-scroll").removeClass("active");
    $(this).addClass("active");
    var val = $("#output1").position().top - 135;

    $("html, body").animate({
        scrollTop: val
    }, 800);
});
$("#example2").click(function() {
    $(".single-scroll").removeClass("active");
    $(this).addClass("active");
    var val = $("#output2").position().top - 89;
    $("html, body").animate({
        scrollTop: val
    }, 800);
});
$("#example3").click(function() {
    $(".single-scroll").removeClass("active");
    $(this).addClass("active");
    var val = $("div#output3").position().top - 89;
    $("html, body").animate({
        scrollTop: val
    }, 800);
});
$("#example4").click(function() {
    $(".single-scroll").removeClass("active");
    $(this).addClass("active");
    var val = $("div#output4").position().top - 89;
    $("html, body").animate({
        scrollTop: val
    }, 800);
});
$("#example5").click(function() {
    $(".single-scroll").removeClass("active");
    $(this).addClass("active");
    var val = $("#output5").position().top - 89;
    $("html, body").animate({
        scrollTop: val
    }, 800);
});
$("#example6").click(function() {
    $(".single-scroll").removeClass("active");
    $(this).addClass("active");
    var val = $("#output6").position().top - 89;
    $("html, body").animate({
        scrollTop: val
    }, 800);
});
$("#example7").click(function() {
    $(".single-scroll").removeClass("active");
    $(this).addClass("active");
    var val = $("#output7").position().top - 89;
    $("html, body").animate({
        scrollTop: val
    }, 800);
});

CSS代码是

    .active{
      color:blue;
    }

我已经尝试了上面的代码，但无法正常工作。 并且活动类不会在滚动条上添加。

header div是固定的。 单击example1时，窗口必须滚动到output1 ；单击example2时，窗口必须滚动到output2 ，

类似于所有5个按钮，窗口必须根据序列号移动到相应的div，并且在单击active类时必须将其添加到clicked选项卡。

类似地，当滚动窗口（不单击）时，如果存在div = output4“，则必须将active类添加到example4 。

我正在寻找与此相同的功能

Answer 1

关于Mohit提供的Demo ，将div精确对准中心并突出显示上面的选项卡。

您需要使用以下代码编辑jsfiddle代码

if ($(this).offset().top > cutoff+200)