Geek Answers Handbook

Clean CSS tabs. Prevent scrolling up the page in a tab.

My case is fully described in the title: when changing tabs, scrolling pages up and I have no idea how to prevent this ...

.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;" />
Run codeHide result

Or in Codepen: http://codepen.io/anon/pen/KwLPBQ

Playback:
1. Scroll the page a little
2. Press the "Second" tab
3. Scroll to the top

Any ideas?

+4
source share
1 answer

Delete the top and left styles and add display:none;to the radio input. If the scrollbars are turned on, if you focus on the input outside the viewport, it scrolls to that element.

, , javascript

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

More articles:


All Articles