纯CSS选项卡 - 防止切换选项卡时页面滚动到顶部

Question

My case completely described in title: when changing tabs, page scrolls to top and I have no idea how to prevent it...

.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. 页面滚动到顶部

有什么想法吗？

- Dmitry

---

我无法解释为什么会发生这种情况，但是从.ubdtabs input[type="radio"]中删除top属性似乎可以解决问题。 - Ben Broadley

@BenBroadley 在单选按钮上加上 display:none; 也可以解决这个问题。 - tkay

@tkay 看起来当复选框被改变时，浏览器窗口会聚焦在它们上面；将顶部属性设置为正9999像素，会将窗口滚动到底部而不是顶部。 - Ben Broadley

@BenBroadley 我已经尝试将复选框定位在顶部：300px处。当窗口聚焦于视口外的元素时，它会自动滚动到该元素。 - tkay

Answer 1

移除顶部和左侧的样式，并给单选输入框添加display:none;。当滚动条启用时，如果你将焦点放在视口外的输入框上，它会滚动到该元素。

如果想要将焦点放在视口外的元素上，请使用以下javascript代码

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

- tkay