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

【问题标题】：scroll to a div and add active class to the tab of the current div滚动到一个 div 并将活动类添加到当前 div 的选项卡
【发布时间】：2014-09-03 06:58:45
【问题描述】：

我有 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 类添加到单击的选项卡中。

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

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

【问题讨论】：

其工作精细类添加jsfiddle.net/o0Lcrv3w/9
它适用于点击功能，但我不明白如何在使用鼠标滚动时获得相同的功能。当我使用鼠标滚动时，活动类必须添加到按钮对应的 div 中。检查链接你会明白的
jsfiddle.net/o0Lcrv3w/12
非常感谢。它的工作:)
是的，您可以为您管理代码，并且您正在绑定 'example1'、'example1' .. 等等，为什么不简单地使用类并设置数据属性来获取目的地

标签： javascript jquery scroll jquery-animate scrollto

【解决方案1】：

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

你需要用下面的编辑jsfiddle代码

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

【讨论】：