当使用scrollTop（）时，我的页面会创建一个额外的空白div。我怎么摆脱它？我的代码如下

时间：2015-08-09 23:00:46

标签： jquery html css

点击“这个地方是什么？” jQuery将显示（）下面的div并向下滚动到它，但是当点击下一页上的“Continue”时，它不仅向下滚动到第三个div而且还在它上面创建一个空白div。我该如何解决这个问题？

$(document).ready(function(){
  $('#about1').hide();
  $('.question').click(function(){
    $("#about1").show();
    $('html, body').animate({
      scrollTop: $("#about1").offset().top}, 500);
   
  });
  $('.question2').click(function(){
    $("#about2").show();
    $('html, body').animate({
      scrollTop: $("#about2").offset().top}, 500);
   
  });
  $('#about3').hide();
  $('.question3').click(function(){
    $("#about3").show();
    $('html, body').animate({
      scrollTop: $("#about3").offset().top}, 500);
   
  });
  $('#about4').hide();
  $('.question4').click(function(){
    $("#about4").show();
    $('html, body').animate({
      scrollTop: $("#about4").offset().top}, 500);
   
  });

  /* Push the body and the nav over by 285px over */
  $('.icon-menu').click(function() {
    $('.menu').animate({
      left: "0px"
    }, 250);

    $('body').animate({
      left: "285px"
    }, 250);

  
  });

  /* Then push them back */
  $('.icon-close').click(function() {
    $('.menu').animate({
      left: "-285px"
    }, 250);

    $('body').animate({
      left: "0px"
    }, 250);

  });


});
*{
  margin: 0px;
  padding: 0px;
}
/* Initial body */

 body {
  left: 0;
  margin: 0;
  position: relative;
}

/* Initial menu */
.menu {
  background: #FDF3E7 repeat left top;
  left: -285px;  /* start off behind the scenes */
  height: 100%;
  position: fixed;
  width: 285px;
  top: 0;
}

/* Basic styling */

.front {
  background-color: #8a0027;
background-image: url(http://www.transparenttextures.com/patterns/45-degree-fabric-light.png);
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
  height: 100%;
}

.menu ul {
  border-top: 1px solid #636366;
  list-style: none;
  margin: 0;
  padding: 0;

}

.menu li {
  border-bottom: 1px solid #636366;
  font-family: 'Open Sans', sans-serif;
  line-height: 45px;
  padding-bottom: 3px;
  padding-left: 20px;
  padding-top: 3px;
}

.menu a {
  color:  #444;
  font-size: 15px;
  text-decoration: none;
  text-transform: uppercase;
}

.icon-close {
  cursor: pointer;
  padding-left: 10px;
  padding-top: 10px;
}

.icon-menu {
  color: #000;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  padding-bottom: 25px;
  padding-left: 25px;
  padding-top: 25px;
  text-decoration: none;
  text-transform: uppercase;
}

.icon-menu i {
  margin-right: 5px;
}
.head_text{
  text-align: center;
  padding-bottom: 10px;
  padding-left: 25px;
  margin-top: 10px;
}
.head_text h1{
  color: #ffffff;
  cursor: pointer;
  font-family: font-family: 'Alice', serif;
  font-size: 9em;
  text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
  opacity: 0.8;
}
.head_text p{
  font-family: Gill Sans, Verdana;
  font-size: 16px;
  line-height: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  color: #fff;

  margin-top: 35px;
}
.head_text a{
  text-decoration: none;
   font-size: 19px;
    font-weight: 300;
        color: #ffcc66;
}
.head_text a:hover{
  color: #FF9009;
}
.head_text a:active{
  color: #E44424;
}
button{
  display: inline-block;
  margin: 0 10px 0 0;
  padding: 15px 45px;
  font-size: 48px;
  font-family: "Bitter",serif;
  line-height: 1.8;
  appearance: none;
  box-shadow: none;
  border-radius: 0;
  text-transform: uppercase;
  margin-top: 150px;
}
button:focus {
  outline: none
}
section.flat button {
  background: #fff;
  background: rgba(255, 255, 255, 0);

  color: #fff;
  text-shadow: -1px 1px #417cb8;
  border: 1px solid #fff;
  transition: all 0.4s ease-out;
}
section.flat button:hover,
section.flat button:focus,
 section.flat button:active {
  background: #fff;
  color: #000;
  transition: all 0.2s ease-in;
}
#about1 {
  background: #FFffff;
  height: 100%;
  display: none;
  text-align: center;

}
#about2 {
  background: #FFffff;
  height: 100%;
  display: none;
  text-align: center;

}
#about3 {
  background: #FFffff;
  height: 100%;
  display: none;
  text-align: center;

}
#about4 {
  background: #FFffff;
  height: 100%;
  display: none;
  text-align: center;

}
#about1 h2{
  font-size: 4em;
  text-align: center;
  font-family: 'Audiowide', cursive;
}
.text-about {
  text-align: center;
}
.text-about p{
  margin: 0 auto;
  margin-top: 90px;
  padding: 60px;
  max-width: 600px;
  font-size: 2em;
}
#about2 p{
  margin:  auto;
  margin-top: 1200px;
  padding: 60px;
  max-width: 600px;
  font-size: 2em;
}
#about3 p{
  margin:  auto;
  margin-top: 1200px;
  padding: 60px;
  max-width: 600px;
  font-size: 2em;
}
#about4 p{
  margin:  auto;
  margin-top: 1200px;
  padding: 60px;
  max-width: 600px;
  font-size: 2em;
}
<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
  <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href='main.css' rel='stylesheet'>
  <link href='http://fonts.googleapis.com/css?family=Alice' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>

  <!-- Google Analytics -->  
  <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-66102823-1', 'auto');
  ga('send', 'pageview');

  </script>
  <!-- End Google Analytics -->

  <title>TEXT TEXT TEXT TEXT</title>
</head>

<body>

  <!-- Google Tag Manager -->
    <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-MJ8TK9"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-MJ8TK9');</script>
  <!-- End Google Tag Manager -->

  <div class="menu">
    <!-- Menu icon -->
    <div class="icon-close">
      <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
    </div>

    <!-- Menu -->
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Help</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
    
    <!--Main Body-->
  <div class="front">
      
    <div class="icon-menu">
      <i class="fa fa-bars"></i>
        Menu
    </div>
    <div class="head_text">
      <h1>Loveygram</h1>
      <p>TEXT TEXT TEXT TEXTTEX</p>
      <section class="flat">
        <button>Enter</button>
      </section>
        
      <a class="question" href="#">What is this place?</a>
    </div> 
  </div>

  <!-- About Page -->
  

    <div id="about1">
      <h2>TEXT TEXT TEXT TEXT</h2>
      <p class="subhead">TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT</p>
      <div class="text-about">
        <p>TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT</br> </br>TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT</p>
          <a class="question2" href="#">Continue</a>
      </div>
    </div>

    <div id="about2" >
        <p>TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT. </br> </br> TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT</p>
        <a class="question3" href="#">Continue</a>
    </div>

    <div id="about3" >
        <p>TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT</p>
        <a class="question4" href="#">Continue</a>
    </div>

    <div id="about4" >
        <p>TTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT</p>
    </div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="love.js"></script>

</body>
</html>

1 个答案:

答案 0 :(得分：0)

为身体增加身高应该能够解决这个问题。这是片段：

＆＃13;
＆＃13; 
$(document).ready(function(){
  $('#about1').hide();
  $('.question').click(function(){
    $("#about1").show();
    $('html, body').animate({
      scrollTop: $("#about1").offset().top}, 500);
   
  });
  $('.question2').click(function(){
    $("#about2").show();
    $('html, body').animate({
      scrollTop: $("#about2").offset().top}, 500);
   
  });
  $('#about3').hide();
  $('.question3').click(function(){
    $("#about3").show();
    $('html, body').animate({
      scrollTop: $("#about3").offset().top}, 500);
   
  });
  $('#about4').hide();
  $('.question4').click(function(){
    $("#about4").show();
    $('html, body').animate({
      scrollTop: $("#about4").offset().top}, 500);
   
  });

  /* Push the body and the nav over by 285px over */
  $('.icon-menu').click(function() {
    $('.menu').animate({
      left: "0px"
    }, 250);

    $('body').animate({
      left: "285px"
    }, 250);

  
  });

  /* Then push them back */
  $('.icon-close').click(function() {
    $('.menu').animate({
      left: "-285px"
    }, 250);

    $('body').animate({
      left: "0px"
    }, 250);

  });


});
＆＃13; 
*{
  margin: 0px;
  padding: 0px;
}
/* Initial body */

 body {
  left: 0;
  margin: 0;
  position: relative;
   height:100vh;
}

/* Initial menu */
.menu {
  background: #FDF3E7 repeat left top;
  left: -285px;  /* start off behind the scenes */
  height: 100%;
  position: fixed;
  width: 285px;
  top: 0;
}

/* Basic styling */

.front {
  background-color: #8a0027;
background-image: url(http://www.transparenttextures.com/patterns/45-degree-fabric-light.png);
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
  height: 100%;
}

.menu ul {
  border-top: 1px solid #636366;
  list-style: none;
  margin: 0;
  padding: 0;

}

.menu li {
  border-bottom: 1px solid #636366;
  font-family: 'Open Sans', sans-serif;
  line-height: 45px;
  padding-bottom: 3px;
  padding-left: 20px;
  padding-top: 3px;
}

.menu a {
  color:  #444;
  font-size: 15px;
  text-decoration: none;
  text-transform: uppercase;
}

.icon-close {
  cursor: pointer;
  padding-left: 10px;
  padding-top: 10px;
}

.icon-menu {
  color: #000;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  padding-bottom: 25px;
  padding-left: 25px;
  padding-top: 25px;
  text-decoration: none;
  text-transform: uppercase;
}

.icon-menu i {
  margin-right: 5px;
}
.head_text{
  text-align: center;
  padding-bottom: 10px;
  padding-left: 25px;
  margin-top: 10px;
}
.head_text h1{
  color: #ffffff;
  cursor: pointer;
  font-family: font-family: 'Alice', serif;
  font-size: 9em;
  text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
  opacity: 0.8;
}
.head_text p{
  font-family: Gill Sans, Verdana;
  font-size: 16px;
  line-height: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  color: #fff;

  margin-top: 35px;
}
.head_text a{
  text-decoration: none;
   font-size: 19px;
    font-weight: 300;
        color: #ffcc66;
}
.head_text a:hover{
  color: #FF9009;
}
.head_text a:active{
  color: #E44424;
}
button{
  display: inline-block;
  margin: 0 10px 0 0;
  padding: 15px 45px;
  font-size: 48px;
  font-family: "Bitter",serif;
  line-height: 1.8;
  appearance: none;
  box-shadow: none;
  border-radius: 0;
  text-transform: uppercase;
  margin-top: 150px;
}
button:focus {
  outline: none
}
section.flat button {
  background: #fff;
  background: rgba(255, 255, 255, 0);

  color: #fff;
  text-shadow: -1px 1px #417cb8;
  border: 1px solid #fff;
  transition: all 0.4s ease-out;
}
section.flat button:hover,
section.flat button:focus,
 section.flat button:active {
  background: #fff;
  color: #000;
  transition: all 0.2s ease-in;
}
#about1 {
  background: #FFffff;
  height: 100%;
  display: none;
  text-align: center;

}
#about2 {
  background: #FFffff;
  height: 100%;
  display: none;
  text-align: center;

}
#about3 {
  background: #FFffff;
  height: 100%;
  display: none;
  text-align: center;

}
#about4 {
  background: #FFffff;
  height: 100%;
  display: none;
  text-align: center;

}
#about1 h2{
  font-size: 4em;
  text-align: center;
  font-family: 'Audiowide', cursive;
}
.text-about {
  text-align: center;
}
.text-about p{
  margin: 0 auto;
  margin-top: 90px;
  padding: 60px;
  max-width: 600px;
  font-size: 2em;
}
#about2 p{
  margin:  auto;
  margin-top: 1200px;
  padding: 60px;
  max-width: 600px;
  font-size: 2em;
}
#about3 p{
  margin:  auto;
  margin-top: 1200px;
  padding: 60px;
  max-width: 600px;
  font-size: 2em;
}
#about4 p{
  margin:  auto;
  margin-top: 1200px;
  padding: 60px;
  max-width: 600px;
  font-size: 2em;
}
＆＃13; 
<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
  <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href='main.css' rel='stylesheet'>
  <link href='http://fonts.googleapis.com/css?family=Alice' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>

  <!-- Google Analytics -->  
  <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-66102823-1', 'auto');
  ga('send', 'pageview');

  </script>
  <!-- End Google Analytics -->

  <title>TEXT TEXT TEXT TEXT</title>
</head>

<body>

  <!-- Google Tag Manager -->
    <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-MJ8TK9"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-MJ8TK9');</script>
  <!-- End Google Tag Manager -->

  <div class="menu">
    <!-- Menu icon -->
    <div class="icon-close">
      <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
    </div>

    <!-- Menu -->
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Help</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
    
    <!--Main Body-->
  <div class="front">
      
    <div class="icon-menu">
      <i class="fa fa-bars"></i>
        Menu
    </div>
    <div class="head_text">
      <h1>Loveygram</h1>
      <p>TEXT TEXT TEXT TEXTTEX</p>
      <section class="flat">
        <button>Enter</button>
      </section>
        
      <a class="question" href="#">What is this place?</a>
    </div> 
  </div>

  <!-- About Page -->
  

    <div id="about1">
      <h2>TEXT TEXT TEXT TEXT</h2>
      <p class="subhead">TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT</p>
      <div class="text-about">
        <p>TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT</br> </br>TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT</p>
          <a class="question2" href="#">Continue</a>
      </div>
    </div>

    <div id="about2" >
        <p>TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT. </br> </br> TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT</p>
        <a class="question3" href="#">Continue</a>
    </div>

    <div id="about3" >
        <p>TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT</p>
        <a class="question4" href="#">Continue</a>
    </div>

    <div id="about4" >
        <p>TTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT</p>
    </div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="love.js"></script>

</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题