Question

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

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

到目前为止，它正在使用下面的代码，但用户必须单击选项卡两次以使其成为活动选项卡，然后滚动。有没有办法让一次点击，选中的标签被标记为活动，它会滚动到标签上的锚点？我对JS有点新意，所以如果这是一个简单的答案我会道歉。我感谢所有帮助，如果您想要标签示例并且必须点击两次，请访问my website。

JS Tabs

$(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 Smooth Scroll

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

HTML

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

Answer 1

＆＃13;

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
    }, 500);
    return false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<ul id="tab">
<li class="active">
    <a name="features"></a>Content 1
</li>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<li>
    <a name="specs"></a>Content 2
</li>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  <li>
    <a name="config"></a>Content 3
</li>

＆＃13;

要滚动到特定的锚点，您可以使用以下内容，我不知道为什么您有这么长的脚本？

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 1000);
    return false;
});

JSFiddle JSFiddle This should give you something to work with

Tabs和JS Smooth Scroll（两次点击）的问题

1 个答案: