css - margin-top 位置的过渡导致窗口滚动

Question

我创建了一个标签动画。这是我的代码笔的链接:http://codepen.io/MartinGonzal/pen/mPeMOd (请忽略其他错误)

黄色标签 中的转换几乎按我想要的方式工作，我对它们有一个问题。当我有一个较小的窗口时，我必须滚动到页面底部才能看到选项卡，当我单击一个选项卡将其打开时，页面会向上滚动。我怎样才能阻止它向上滚动？

这是我的代码:

<div id="tabs_wrapper">
    <div id="all_tabs">      
        <div class="tab_container" id="tab1">
            <div class="tab_area"><a href="#" class="tab">Tab 1</a></div>
            <div class="tab_content" id="tab1_content">
                <p>This is the content of tab 1</p>
            </div>
        </div>
    </div>
</div>


.tab_container {
  /* box-sizing: border-box;
  width: 150px;
  min-height: 176px;
  position: absolute;
  top: -50px;
  transition: margin-top ease 1s; */
  box-sizing: border-box;
  width: 150px;
  min-height: 176px;
  position: absolute;
  top: -50px;
  transition: top ease 1s;
}
/*test*/
.open_yellow_tab {
  top: -176px;
}

谢谢。

Answer 1

这是由于 # 在你的 href 里面.而是使用 javascript:void(0)在你的href的 <a> .

使用:

<div class="tab_area"><a href="javascript:void(0)" class="tab">Tab 1</a></div>

代替:

<div class="tab_area"><a href="#" class="tab">Tab 1</a></div>

希望这对您有所帮助!