Javascript 选项卡和JS平滑滚动问题（两次单击）

我在stackoverflow上搜索了一下，没有找到这个问题的确切答案

我的网页上有一些标签。我希望当用户单击选项卡时，在用户选择的选项卡上放置一个活动标记，然后滚动到第一个锚定（锚定通常放置在第一段之前）

到目前为止，它正在使用下面的代码，但用户必须单击两次选项卡才能使其成为活动选项卡，然后才能滚动。是否有一种方法可以使选中的选项卡在单击一次后标记为活动，并滚动到选项卡上的定位点？我对JS有点陌生，所以如果这是一个简单的答案，我很抱歉。我感谢所有的帮助，如果你想要一个标签的例子，并且必须点击两次，请访问

JS标签

$(document).ready(function () {
$("ul#tabs li").click(function (e) {
    if (!$(this).hasClass("active")) {
        var tabNum = $(this).index();
        var nthChild = tabNum + 1;
        $("ul#tabs li.active").removeClass("active");
        $(this).addClass("active");
        $("ul#tab li.active").removeClass("active");
        $("ul#tab li:nth-child(" + nthChild + ")").addClass("active");
    }
});
});

JS平滑卷轴

;
(function ($) {
var h = $.scrollTo = function (a, b, c) {
    $(window).scrollTo(a, b, c)
};
h.defaults = {
    axis: 'xy',
    duration: parseFloat($.fn.jquery) >= 1.3 ? 0 : 1,
    limit: true
};
h.window = function (a) {
    return $(window)._scrollable()
};
$.fn._scrollable = function () {
    return this.map(function () {
        var a = this,
            isWin = !a.nodeName || $.inArray(a.nodeName.toLowerCase(), ['iframe', '#document', 'html', 'body']) != -1;
        if (!isWin) return a;
        var b = (a.contentWindow || a).document || a.ownerDocument || a;
        return /webkit/i.test(navigator.userAgent) || b.compatMode == 'BackCompat' ? b.body : b.documentElement
    })
};
$.fn.scrollTo = function (e, f, g) {
    if (typeof f == 'object') {
        g = f;
        f = 0
    }
    if (typeof g == 'function') g = {
        onAfter: g
    };
    if (e == 'max') e = 9e9;
    g = $.extend({}, h.defaults, g);
    f = f || g.duration;
    g.queue = g.queue && g.axis.length > 1;
    if (g.queue) f /= 2;
    g.offset = both(g.offset);
    g.over = both(g.over);
    return this._scrollable().each(function () {
        if (e == null) return;
        var d = this,
            $elem = $(d),
            targ = e,
            toff, attr = {}, win = $elem.is('html,body');
        switch (typeof targ) {
            case 'number':
            case 'string':
                if (/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(targ)) {
                    targ = both(targ);
                    break
                }
                targ = $(targ, this);
                if (!targ.length) return;
            case 'object':
                if (targ.is || targ.style) toff = (targ = $(targ)).offset()
        }
        $.each(g.axis.split(''), function (i, a) {
            var b = a == 'x' ? 'Left' : 'Top',
                pos = b.toLowerCase(),
                key = 'scroll' + b,
                old = d[key],
                max = h.max(d, a);
            if (toff) {
                attr[key] = toff[pos] + (win ? 0 : old - $elem.offset()[pos]);
                if (g.margin) {
                    attr[key] -= parseInt(targ.css('margin' + b)) || 0;
                    attr[key] -= parseInt(targ.css('border' + b + 'Width')) || 0
                }
                attr[key] += g.offset[pos] || 0;
                if (g.over[pos]) attr[key] += targ[a == 'x' ? 'width' : 'height']() * g.over[pos]
            } else {
                var c = targ[pos];
                attr[key] = c.slice && c.slice(-1) == '%' ? parseFloat(c) / 100 * max : c
            }
            if (g.limit && /^\d+$/.test(attr[key])) attr[key] = attr[key] <= 0 ? 0 : Math.min(attr[key], max);
            if (!i && g.queue) {
                if (old != attr[key]) animate(g.onAfterFirst);
                delete attr[key]
            }
        });
        animate(g.onAfter);

        function animate(a) {
            $elem.animate(attr, f, g.easing, a && function () {
                a.call(this, e, g)
            })
        }
    }).end()
};
h.max = function (a, b) {
    var c = b == 'x' ? 'Width' : 'Height',
        scroll = 'scroll' + c;
    if (!$(a).is('html,body')) return a[scroll] - $(a)[c.toLowerCase()]();
    var d = 'client' + c,
        html = a.ownerDocument.documentElement,
        body = a.ownerDocument.body;
    return Math.max(html[scroll], body[scroll]) - Math.min(html[d], body[d])
};

function both(a) {
    return typeof a == 'object' ? a : {
        top: a,
        left: a
    }
}
    })(jQuery);

    ;
    (function (b) {
function g(a, e, d) {
    var h = e.hash.slice(1),
        f = document.getElementById(h) || document.getElementsByName(h)[0];
    if (f) {
        a && a.preventDefault();
        var c = b(d.target);
        if (!(d.lock && c.is(":animated") || d.onBefore && !1 === d.onBefore(a, f, c))) {
            d.stop && c._scrollable().stop(!0);
            if (d.hash) {
                var a = f.id == h ? "id" : "name",
                    g = b("<a> </a>").attr(a, h).css({
                        position: "absolute",
                        top: b(window).scrollTop(),
                        left: b(window).scrollLeft()
                    });
                f[a] = "";
                b("body").prepend(g);
                location = e.hash;
                g.remove();
                f[a] = h
            }
            c.scrollTo(f, d).trigger("notify.serialScroll", [f])
        }
    }
}
var i = location.href.replace(/#.*/, ""),
    c = b.localScroll = function (a) {
        b("body").localScroll(a)
    };
c.defaults = {
    duration: 1E3,
    axis: "y",
    event: "click",
    stop: !0,
    target: window,
    reset: !0
};
c.hash = function (a) {
    if (location.hash) {
        a = b.extend({}, c.defaults, a);
        a.hash = !1;
        if (a.reset) {
            var e = a.duration;
            delete a.duration;
            b(a.target).scrollTo(0, a);
            a.duration = e
        }
        g(0, location, a)
    }
};
b.fn.localScroll = function (a) {
    function e() {
        return !!this.href && !! this.hash && this.href.replace(this.hash, "") == i && (!a.filter || b(this).is(a.filter))
    }
    a = b.extend({}, c.defaults, a);
    return a.lazy ? this.bind(a.event, function (d) {
        var c = b([d.target, d.target.parentNode]).filter(e)[0];
        c && g(d, c, a)
    }) : this.find("a,area").filter(e).bind(a.event, function (b) {
        g(b, this, a)
    }).end().end()
}
    })(jQuery);

     // Initialize all .smoothScroll links
    jQuery(function ($) {
$.localScroll({
    filter: '.smoothScroll'
});
     });

；
（函数（$）{
var h=$.scrollTo=函数（a、b、c）{
$（窗口）。滚动到（a、b、c）
};
h、 默认值={
轴：“xy”，
持续时间：parseFloat（$.fn.jquery）>=1.3？0:1，
极限：真
};
h、 窗口=功能（a）{
返回$（窗口）。\u可滚动（）
};
$.fn.\u可滚动=函数（）{
返回此.map（函数（）{
var a=这个，
isWin=！a.nodeName | |$.inArray（a.nodeName.toLowerCase（），['iframe'，'#document'，'html'，body']）！=-1；
如果（！isWin）返回一个；
var b=（a.contentWindow | | a）.document | | a.ownerDocument | a；
return/webkit/i.test（navigator.userAgent）| | b.compatMode==“BackCompat”？b.body:b.documentElement
})
};
$.fn.scrollTo=函数（e、f、g）{
if（typeof f=='object'）{
g=f；
f=0
}
如果（typeof g=='function'）g={
onAfter:g
};
如果（e=‘max’）e=9e9；
g=$.extend（{}，h.defaults，g）；
f=f | | g.持续时间；
g、 queue=g.queue&&g.axis.length>1；
如果（g.queue）f/=2；
g、 偏移量=两者（g.偏移量）；
g、 over=两者（g.over）；
返回此值。_scrollable（）。每个函数（）{
如果（e==null）返回；
var d=这个，
$elem=$（d），
targ=e，
toff，attr={}，win=$elem.is（'html，body'）；
开关（targ类型）{
案件编号：
大小写“string”：
如果（/^（[+-]=）？\d+（\.\d+）（px |%）？$/.test（targ））{
targ=两者（targ）；
打破
}
targ=$（targ，本）；
如果（！target.length）返回；
案例“对象”：
if（target.is | | target.style）toff=（target=$（target））.offset（）
}
$。每个（g轴拆分（“”），函数（i，a）{
变量b=a='x'？'Left'：'Top'，
pos=b.toLowerCase（），
键='滚动'+b，
old=d[key]，
max=h.max（d，a）；
如果（toff）{
attr[key]=toff[pos]+（win？0:old-$elem.offset（）[pos]）；
如果（g.保证金）{
attr[key]=parseInt（target.css（'margin'+b））| | 0；
attr[key]=parseInt（target.css（'border'+b+'Width'））| | 0
}
attr[key]+=g.offset[pos]| | 0；
如果（g.over[pos]）attr[key]+=target[a=='x'？'width'：'height']（）*g.over[pos]
}否则{
var c=目标[pos]；
attr[key]=c.slice&&c.slice（-1）='%'？parseFloat（c）/100*最大值：c
}
如果（g.limit&&/^\d+$/.test（attr[key]））attr[key]=attr[key]
$（'a'）。单击（函数（）{
$（'html，body'）。设置动画({
scrollTop:$（'[name=“'+$.attr（this，'href'）.substr（1）+'“]'））.offset（）.top
}, 500);
返回false；
})；

























内容1



















内容2



















内容3
@hjardline我感谢您的帮助！虽然长代码允许平滑滚动。但您提供的代码不会以平滑的方式滚动到锚点（这是我自己的设计，而不是对您的代码进行重击，因为它工作得非常完美）。此外，我还必须单击我的选项卡两次，才能使选项卡处于活动状态并平滑滚动。有没有办法将其压缩为一次单击？GoPro是一个很好的例子，当您单击选项卡时，它会使其处于活动状态并滚动到锚定：@FlexMarket您必须单击JSFiddle页面顶部的“Run”才能使JQuery处于活动状态，它确实有smooth scroll谢谢！它确实可以与小提琴配合使用。但是，当我将它添加到我的网站时，它失去了平滑滚动，只是转到了锚点。可以在这里看到：在处理它之后，平滑滚动仍然不能与新小提琴配合使用（JSFIDLE这应该给你一些可以使用的东西）.你知道如何让平滑的卷轴工作吗？
<ul id="tabs">
<li class="active"><a href="#features" class="smoothScroll">FEATURES</a></li>
<li><a href="#specs" class="smoothScroll">SPECIFICATIONS</a></li>
<li><a href="#config" class="smoothScroll">COMPARE CONFIGURATIONS</a></li>
</ul>

<ul id="tab">
<li class="active">
    <a name="features"></a>Content 1
</li>
<li>
    <a name="specs"></a>Content 2
</li>
  <li>
    <a name="config"></a>Content 3
</li>