Transition on margin-top position causes window scroll

Question

I have created a tab animation. Here's a link to my codepen: http://codepen.io/MartinGonzal/pen/mPeMOd (please ignore other bugs)

The transition in the yellow tabs is almost working how I want, I have one issue with them. When I have a smaller window that I have to scroll to the bottom of the page to see the tabs, the page scrolls up when I click a tab to open it. How can I stop it from scrolling back up?

Here's my code:

<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;
}

Thanks.

Answer 1

replace

href="#"

by

href="javascript:;"

in your <a> tag

edited thx to comment below

Answer 2

You need to stop the default browser's behavior for links with href="#". The browser tries to look for an element with an empty id but since he can't find any it just scrolls to the top. To fix it use preventDefault() in your click handler:

$(".tab").click(function(){
    // this doesn't work
});

$(".tab").click(function(e){
    e.preventDefault();
    // this works
});

Example:

$(document).ready(function(){
  /***************** Green tab animation ****************/
  var slider_tab = $("#slider_tab");
  var green_slider = $("#green_slider");  
  slider_tab.click(function(){
    if(green_slider.hasClass("open")){
      green_slider.removeClass("open");
    }else{
      green_slider.addClass("open");
    }
  });
  
  /***************** Yellow tabs animation ****************/
  $(".tab").click(function(e){
    e.preventDefault();
    //This is the parent div for the tab and content divs
    var content = $(this).parent().parent();

    //Get height and remove "px" from string
    var height = content.css("height");
    //Remove 50 pixels from the height to account for the tab height
    height = parseInt(height) - 50;
    
    var margin = content.css("marginTop").slice(0, -2);
    if(margin >= 0){
      /*If there is not a margin the tab is closed. Add
        negative margin to the top to make it move up*/
      content.css("margin-top", "-" + height + "px");
    }else{
      //Remove top margin to close tab
      content.css("marginTop", "0px");
    } 

  }); 
  
  
  
  /*test - transition yellow tabs with top position*/
/*   $(".tab").click(function(){
    var content = $(this).parent().parent();
    content.toggleClass("open_yellow_tab");
  }); */
  
  
  
  /***************** Copyright bar ****************/
  $("#copy").keyup(function(){
    $("#output").text($(this).val());
    
    if (!($(this).val())){
          $("#output").text(" ");
       }
  });
  
  /***************** Canvas ****************/
  var c = document.getElementById("canvas");
  var ctx = c.getContext("2d");

  ctx.beginPath();
  ctx.moveTo(0, 100);
  ctx.lineTo(262, 46);
  ctx.lineTo(212, 0);
  ctx.lineTo(0, 0);
  ctx.fillStyle = '#eeca14';
  ctx.fill();

  ctx.font = "22px Oswald";
  ctx.fillStyle = '#000';
  ctx.fillText("CANVAS TEXT", 20, 35);
  
});

@import url('https://fonts.googleapis.com/css?family=Oswald|Roboto|Roboto+Condensed');
body {
  font-family: 'Oswald', sans-serif;
/*     position: relative;
  display: flex;
  flex-direction: column;
  max-height: 100vh; */
}
#wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
}
a {
  text-decoration: none;
  color: black;
}
#top {
  background-color: #282526;
  height: 300px;
}
#hide_overflow {
  width: auto;
  height: auto;
  display: block;
  z-indez: 4;
}

/*********************************** GREEN TAB **********************/
#green_slider {
  position: fixed;
  left: -352px;
  margin-top: 100px;
  width: 343px;
  height: 115px;
  border: 9px solid #3fae29;
  border-right: 45px solid #3fae29;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  background-color: #fff;
  transition: margin-left ease 1s;
  z-index: 4;
}
#slider_tab {
  /*******Positioning******/
  position: absolute;
  top: 34px;
  left: 300px;
  width: 130px;
  height: 45px;
  transform: rotate(90deg);
  cursor: pointer;
  /*Round Corners to match green borders*/
  border: 1px solid transparent;
  border-radius: 15px 15px 0px 0;
  /*******Text*********/
  text-align: center;
  vertical-align: middle;
  line-height: 45px;
  font-family: sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: white;
  /*This is so the text stops shaking during the transition*/
  -webkit-backface-visibility: hidden;
}
#green_content {
  width: 100%;
}
#green_content_left {
  max-width: 60%;
  margin: 0;
  padding: 0;
  float: left;
}
#green_content_left p {
  margin: 10px 5px 5px 5px;
  padding: 0;
  font-size: 19px;
  font-weight: bold;
  text-transform: uppercase;
}
#green_content_left p:nth-child(2) {
  margin-top: 5px;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 14px;
  font-weight: 100;
}
#green_content_left p:nth-child(3) {
  font-size: 24px;
  font-weight: bold;
  color: #cf112b;
  letter-spacing: 1px;
  margin-top: 20px;
}
#green_content_right {
  position: relative;
  width: 39%;
  hegith: 300px;
  margin: 0;
  padding: 0;
  float: right;
}
#green_content_right img {
  width: 60px;
  height: 60px;
  margin: 5px 5px 5px 5px;
  float: left;
}
#green_content_right span {
  display: inline-block;
  position: absolute;
  top: 24px;
  right: -8px;
  max-width: 72px;
  font-size: 21px;
  font-weight: bold;
  color: #3fae29;
  transform: rotate(90deg);
}
#green_content a {
  display: inline-block;
  float: right;
  width: 106px;
  margin: 2px 5px;
  padding: 10px 12px;
  font-size: 12px;
  text-transform: uppercase;
  text-align: center;
  font-weight: 400;
  color: #fff;
  background-color: #313131;
  background: linear-gradient(to bottom, #777777 0%, #222222 100%);
  border: 1px solid transparent;
  border-radius: 6px;
}
.open {
  position: relative;
  margin-left: 352px;
}

/*********************************** MIDDLE SECTION **********************/
#middle_section {
  position: relative;
  width: 100%;
  height: 290px;
  margin: 0;
}
#content {
  width: 899px;
  /* height: 290px; */
  margin: auto;
}
#content p {
  width: 654px;
  margin: 20px auto;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: #000;
}
#content p span {
  display: block;
  width: 35px;
  height: 80px;
  float: left;
  font-family: "Times New Roman", sans-serif;
  font-size: 24px;
}

/*********************************** YELLOW TABS **********************/
#tabs_wrapper{
  position: relative;
  display: flex;
  width: 100%;
}
#all_tabs {
  width: 899px;
  margin: auto;
}
.tab_container {
  box-sizing: border-box;
  width: 150px;
  min-height: 176px;
  position: absolute;
  top: -50px;
  transition: margin-top ease 1s;
/****** TEST TO TRANSITION WITH TOP POSITION *******/
  /*   box-sizing: border-box;
  width: 150px;
  min-height: 176px;
  position: absolute;
  top: -50px;
  transition: top ease 1s; */
}
/*test*/
.open_yellow_tab {
  top: -176px;
}


.tab_area{
  width: 100%;
  height: 50px;
  box-sizing: border-box;
}
.tab{
  display: inline-block;
  min-width: 120px;
  height: 20px;
  text-align: center;
  background-color: #EEC917;
  padding: 15px;
  text-transform: uppercase;
  font-size: 18px;
}
.tab_content {
  width: 500px;
  min-height: 176px;
  background-color: #EEC917;
  padding: 15px;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  box-sizing: border-box;
}
#tab1 {
  z-index: 3;
}
#tab2{
  margin-left: 160px;
  z-index: 2;
}
#tab3{
  margin-left: 320px;
  z-index: 1;
}

/*********************************** FOOTER **********************/

footer {
  width: 100%;
  height: 271px;
  /* height: 281px; */
  background-color: #282526;
  z-index: 3;
}
#footer_content {
  width: 100%;
  height: 100%;
  /* height: 90%; */
  background-color: #282526;
}
#copyright_bar {
  width: 100%;
  /* height: 10%; */
  min-height: 30px;
  background-color: #fff;
  z-index: 3;
}
#copyright_bar p {
  padding: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 300;
  color: #555;
  text-align: center;
  line-height: 28px;
}

/*********************************** COPY BAR **********************/
#copyright_bar input {
  outline: none;
  outline-style: none;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid #000;
  margin-left: 5px;
  padding-left: 4px;
  font-size: 14px;
}
#output {
  margin-left: 10px;
  font-size: 14px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
  <section id="top">
    <div id="green_slider">
      <div id="green_content">
        <div id="green_content_left">
          <p>I am the title</p>
          <p>I am the longer sub title.</p>
          <p>content!</p>
        </div>
        <div id="green_content_right">
          <img>
          <span>Green</span>
        </div>
        <a href="#">button text</a>
      </div>
      <div id="slider_tab">HELLO :)</div>
    </div>
  </section>

  <section id="middle_section">
    <div id="content">
      <canvas id="canvas" width="272" height="100"></canvas>
      <p><span>A:</span>Lorem ipsum dolor sit amet, morbi amet aenean ante pede blandit, vitae magna sit orci, quis sagittis purus sed senectus dis malesuada. Mi nibh elit veritatis nunc eget nunc, sit magna vivamus cras velit justo purus, vestibulum turpis mauris massa in eleifend dolor. Mauris vitae id, neque mi ultricies risus ridiculus.</p>
    </div><!-- #content -->
  </section>

  <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 class="tab_container" id="tab2">
        <div class="tab_area"><a href="#" class="tab">Tab 2</a></div>
        <div class="tab_content" id="tab2_content">
          <p>Lorem ipsum dolor sit amet, morbi amet aenean ante pede blandit, vitae magna sit orci, quis sagittis purus sed senectus dis malesuada.</p>
          <p>Mi nibh elit veritatis nunc eget nunc, sit magna vivamus cras velit justo purus, vestibulum turpis mauris massa in eleifend dolor. Mauris vitae id, neque mi ultricies risus ridiculus, consectetuer vitae congue morbi pellentesque a mollis.</p>
        </div>
      </div>

      <div class="tab_container" id="tab3">
        <div class="tab_area"><a href="#" class="tab">Tab 3</a></div>
        <div class="tab_content" id="tab3_content">
          <p>Lorem ipsum dolor sit amet, tellus facilisis elit est suspendisse elit quis, erat ipsum dignissim donec imperdiet vitae, aenean egestas pellentesque dui sed, metus ornare blandit sociosqu sit duis tellus, non arcu ipsum metus at.</p>
          <p> Viverra ut, amet nec orci, vitae diam, bibendum donec a placerat nulla ad. Lorem ipsum dolor sit amet.</p>
          <p>Donec est dictum velit pellentesque quis.</p>
          <p>Dui nascetur sociis mi nascetur, omnis sed fugiat erat amet dignissim condimentum. Tellus facilisis elit est suspendisse elit quis.</p>
          </p>Massa quis diam duis, lacus erat nec libero, eu ullamcorper mi magna mauris felis ante, eu in gravida ut lorem aliquam.</p>
          <p>Sapien ullamcorper pellentesque orci fermentum nunc.</p>
          <p>Aliquam erat, ultrices quisque erat.</p>
          <p>Pede lorem vestibulum velit sed, suspendisse sollicitudin, vitae lorem sed sed posuere leo, nullam autem ad, neque ante purus nec pede venenatis dis.</p>
        </div>
      </div><!-- tab_container -->
    </div><!-- #all_tabs -->
  </div><!-- #tabs_wrapper -->

  <footer>
    <div id="footer_content"></div>
    <div id="copyright_bar">
      <p>Hi I am the copy bar. Enter something here:<input type="text" id="copy"><span id="output"></span></p>
    </div>
  </footer>
<!-- <div id="copyright_bar">
      <p>Hi I am the copy bar. Enter something here:<input type="text" id="copy"><span id="output"></span></p>
    </div> -->
</div><!--#wrapper-->
<!-- <div id="hide_overflow"></div> -->

Answer 3

This is due to # inside your href. Instead use javascript:void(0) in your href of <a>.

Use:

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

Instead of:

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

Hope this helps!