Question

我创建了一个标签动画。这是我的codepen的链接：http://codepen.io/MartinGonzal/pen/mPeMOd （请忽略其他错误）

黄色标签中的转换几乎按照我想要的方式进行，我遇到了一个问题。当我有一个较小的窗口，我必须滚动到页面的底部以查看选项卡，当我单击一个选项卡打开它时页面向上滚动。如何阻止它向后滚动？

这是我的代码：

<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 引起的。而是在javascript:void(0)的{{1}}中使用href。

使用：

<a>

而不是：

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

希望这有帮助！

Answer 2

替换

href="#"

通过

href="javascript:;"

在<a>标记

中

编辑thx以在下面发表评论

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

边距顶部位置的转换导致窗口滚动

3 个答案: