边距顶部位置的过渡会导致窗口滚动

Question

我已经创建了一个标签动画。这是我的合作伙伴的链接:http://codepen.io/MartinGonzal/pen/mPeMOd(请忽略其他bug)

黄色标签的过渡几乎是我想要的，我有一个问题。当我有一个较小的窗口，我必须滚动到页面底部才能看到选项卡时，当我点击一个选项卡打开它时，页面会向上滚动。我怎样才能阻止它向上滚动?

下面是我的代码:

<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。在<a>的href中使用javascript:void(0)。

使用:

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

希望这对你有帮助!

Answer 2

replace

href="#"

href="javascript:;"

在<a>标签

Answer 3

您需要停止默认浏览器的行为为链接href="#"。浏览器试图寻找一个空id的元素，但因为他找不到，它只是滚动到顶部。要修复它，请在单击处理程序中使用preventDefault():

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

的例子:

$(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> -->