JS Smooth Scroll不使用选项卡

Question

我遇到了一些代码问题。我有一组标签，每个标签都有内容。当用户单击选项卡时，我希望它打开选项卡内容并平滑滚动到选项卡内容中的锚点。目前，我有以下代码打开活动标签内容并滚动到锚点。但是，它不会平滑滚动，它只会跳转到锚点。有人可以帮助我，以便顺利滚动到锚点吗？我将不胜感激任何帮助。

Current Fiddle that shows the jump

My website with a live example of what happens

代码

data = open('tweets_testing.json').read()
vals = json.loads(data)

HTML标签

var hrefname = null;

$('a').click(function () {
var $tab = $(this).closest('li')
if (!$tab.hasClass("active")) {
var tabNum = $tab.index();
var nthChild = tabNum + 1;
$("ul#tabs li.active").removeClass("active");
$(this).addClass("active");
$("ul#tab li.active").removeClass("active").hide();
$("ul#tab li:nth-child(" + nthChild + ")").addClass("active").show();
}
setTimeout(function () {
$('html, body').animate({
    scrollTop: $('[name="' + hrefname + '"]').offset().top
}, 500);
var href = $('a').attr('href');
console.log(href);
hrefname = href;
return false;
}, 10000);
});

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

CSS（感兴趣的人）

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