Javascript JS选项卡的滚动条问题

我是javascript新手，所以问题可能实际上在于我知道多少或者如何用词搜索这个，但我在其他任何地方都没有发现同样的问题：

当使用脚本创建一组选项卡时，它们工作正常，但每个选项卡上的滚动条将保持不变。例如，如果我转到第二个选项卡，一直向下滚动，然后单击第三个选项卡，而不是单击顶部，它将停留在底部，因为它位于第二个选项卡上

这就是我正在处理的问题：

如果你能解释问题是什么，如何解决它，以及为什么它会起作用，那将是绝对美妙的

---

感谢您抽出时间阅读

滚动条位于父元素

.tab content

上

正在操作（隐藏/显示）的元素是子元素，

.tab

因此，父元素上的滚动条始终存在。因此，在切换选项卡时，滚动条的位置不会改变

为了解决这个问题，您可以将滚动条移动到子元素而不是父元素

---

。。。或者，您也可以在每次更改选项卡时将

.tab content

的滚动条滚动到顶部

---

非常感谢你！第二点很有魅力。

jQuery(document).ready(function() {
  jQuery('.tabs .tab-links a').on('click', function(e)  {
    var currentAttrValue = jQuery(this).attr('href');

    // Show/Hide Tabs
    jQuery('.tabs ' + currentAttrValue).fadeIn(400).siblings().hide();

    // Change/remove current tab to active
    jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

    e.preventDefault(e);
  });
});

 .tab {
     display: none;
     overflow: auto;         /* Moved this from the parent element */
     height: 100%;
     padding: 10px;          /* This *was* on the parent element, too. */
     box-sizing: border-box; /* Include the padding in the 
                                element's width/height calculations */
 }

$('.tab-content').scrollTop(0);