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

我有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>

CSS代码是

    .active{
      color:blue;
    }

我已经试过上面的代码，它不能正常工作。并且活动类不会添加到滚动上

标题

div是固定的。单击

example1

时，窗口必须滚动到

output1

，单击

example2

时，窗口必须滚动到

output2

与所有5个按钮类似，窗口必须根据序列号移动到相应的div，并且在单击时，必须将

active

class添加到单击的选项卡中

类似地，当滚动窗口（不单击）时，如果存在div=output4”，则必须将

活动类添加到
示例4

我正在寻找与Mohit提供的功能相同的功能，中间精确的div对齐，并突出显示上面的选项卡

您需要使用以下命令编辑JSFIDLE代码

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

它的wroking fine类添加了它的working for click函数，但我不知道如何在使用鼠标滚动时获得相同的功能。当我使用鼠标滚动时，必须将活动类添加到与div对应的按钮。检查链接U将了解Thanx很多。它的工作：）是的，您可以为您管理代码，并且您正在绑定“example1”、“example1”等为什么不简单地使用类并设置数据属性来获取目的地呢
if ($(this).offset().top > cutoff+200)