纯 CSS 选项卡 - 防止在选项卡更改时滚动到页面顶部答案

【问题标题】：Pure CSS tabs - Prevent scroll to page top on tab change纯 CSS 选项卡 - 防止在选项卡更改时滚动到页面顶部
【发布时间】：2015-06-09 08:42:14
【问题描述】：

标题中完全描述了我的情况：更改选项卡时，页面滚动到顶部，我不知道如何防止它......

.ubdtabs {
  
  float: none;
  list-style: none;
  position: relative;
  text-align: left;
  padding-left: 8px;
}
.ubdtabs li {
  float: left;
  display: block;
}
.ubdtabs input[type="radio"] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
.ubdtabs label {
  display: block;
  padding: 14px 21px;

  
  font-weight: normal;
  text-transform: uppercase;
  background: -webkit-linear-gradient(top, #1B6889 0%,#009DE0 100%);
  cursor: pointer;
  position: relative;
  
/*  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;*/
  text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
  border-radius: 5px 5px 0 0;
  box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
}
.ubdtabs label:hover {
  background: #1B6889;
}
.ubdtabs .ubdtab-content {
  z-index: 2;
  display: none;
  overflow: hidden;
  width: 100%;
  
  line-height: 25px;
  padding: 25px;
  position: absolute;
  
  left: 0;
  background: #b3d4fc;
}
.ubdtabs [id^="ubdtab"]:checked + label {
  
  
  background: #b3d4fc;
}
.ubdtabs [id^="ubdtab"]:checked ~ [id^="ubdtab-content"] {
  display: block;
}

<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<ul class="ubdtabs">
    <li>
        <input type="radio" name="ubdtabs" id="ubdtab1" checked />
        <label for="ubdtab1">first</label>
        <div id="ubdtab-content1" class="ubdtab-content">
        <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
        </div>
    </li>
  
    <li>
        <input type="radio" name="ubdtabs" id="ubdtab2" />
        <label for="ubdtab2">second</label>
        <div id="ubdtab-content2" class="ubdtab-content">
		<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 	
        </div>
    </li>
</ul>

<br style="clear: both;" />

或在 Codepen：http://codepen.io/anon/pen/KwLPBQ

复制：
1. 向下滚动页面
2.点击“第二”标签
3. 页面滚动到顶部

有什么想法吗？

【问题讨论】：

我无法解释为什么会这样，但从 .ubdtabs input[type="radio"] 中删除顶部属性似乎可以解决问题
@BenBroadley 显示：无；单选按钮上的也可以解决问题。
@tkay 似乎浏览器窗口在更改复选框时会关注它们；将 top 属性设置为正 9999px，将窗口滚动到底部而不是顶部。
@BenBroadley 我已经检查了将复选框定位在顶部：300px；当窗口聚焦于视口之外的元素时，它会自动滚动到该元素。

标签： html css tabs

【解决方案1】：

删除顶部和左侧样式并将display:none; 添加到无线电输入。如果您专注于视口之外的输入，则会启用滚动条，它会滚动到该元素。

如果您想关注视口之外的元素，请使用此 javascript 代码

var donotScroll = function(element) {
  var x = window.scrollX, y = window.scrollY;
  element.focus();
  window.scrollTo(x, y);
}

【讨论】：