Я создал сайт, который использует кнопки для перехода на следующую страницу, и все работает отлично. За исключением на главной странице, где есть много пустого пространства под всем контентом. Я попытался скрыть переполнение, но это блокирует кнопку, которую вы должны нажать, чтобы перейти на следующую страницу. Мне бы хотелось, чтобы высота первой страницы была равна высоте экрана пользователя, а если какой-то контент не помещается, разрешите им прокрутить вниз.

Вот кодекс: https://codepen.io/Lukie/pen/eWobYa

// If user clicks on .downBtn
function scrollDown() {
  $(".home").removeClass("slideInLeft");
  $(".home").addClass("slideOutUp");
  
  $(".content").css("visibility", "visible");
  $(".content").removeClass("slideOutDown");
  $(".content").addClass("slideInUp");
}

// If user clicks on .upBtn
function scrollUp() {
  $(".home").removeClass("slideOutUp");
  $(".home").addClass("slideInDown");
  $(".home").css("visibility", "visible");
  
  $(".content").removeClass("slideInUp");
  $(".content").addClass("slideOutDown");
}
body {
  background-color: white;
  overflow-x: hidden;
  transition: all .6s ease-in-out;
}

.home {
  top: 0;
  visibility: visible;
}

.content {
  position: absolute;
  top: 0;
  visibility: hidden;
}

.logo {
  margin: 4% 0 14% 0;
}

.downBtn {
  position: relative;
  color: orange;
  transition: all .3s ease-in-out;
}

.downBtn:hover {
  transform: scale(1.2);
  cursor: pointer;
  transition: all .3s ease-in-out;
}

.upBtn {
  position: relative;
  color: black;
  margin: 4% 0 0 8%;
  transition: all .3s ease-in-out;
}

.upBtn:hover {
  transform: scale(1.2);
  cursor: pointer;
  transition: all .3s ease-in-out;
}

.car {
  transform: scale(.8); 
}

p {
  font-family: Raleway;
  font-size: 14px;
  line-height: 180%;
  color: black;
  margin: 0 22% 10% 18%;
  padding: 10px;
  border-left: 2px solid #191a1c;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Home Page -->
<div class="container-fluid home animated slideInLeft">
  <!-- Tesla Logo -->
  <div class="row">
    <div class="col-md-12">
      <a href="https://www.tesla.com/" target="_blank"><img class="logo mx-auto d-block" src="http://resizeimage.net/mypic/TkJbULc2TToQO5jb/Nyv35/tesla.png" alt="Tesla Logo"></a>
    </div>
  </div>
  <!-- Scroll Down Button -->
  <div class="row">
    <div class="col-md-12 text-center">
      <i class="downBtn fa fa-5x fa-angle-down" aria-hidden="true" onclick="scrollDown()"></i>
    </div>
  </div>
</div>

<!-- Content Page -->
<div class="container-fluid content animated slideOutDown">
  <!-- Scroll Up Button -->
  <div class="row">
    <div class="col-md-12 text-left">
      <i class="upBtn fa fa-5x fa-angle-up" aria-hidden="true" onclick="scrollUp()"></i>
    </div>
  </div>
  <!-- Car Image -->
  <div class="row">
    <div class="col-md-12">
      <img class="car mx-auto d-block" src="https://www.tesla.com/tesla_theme/assets/img/modals/model-select-models.png?20160811" alt="Tesla" </div>
    </div>
    <!-- Paragraph about Tesla -->
    <div class="row">
      <div class="col-md-12">
        <p>Tesla’s mission is to accelerate the world’s transition to sustainable energy. Since our founding in 2003, Tesla has broken new barriers in developing high-performance automobiles that are not only the world’s best and highest-selling pure electric
          vehicles—with long range and absolutely no tailpipe emissions—but also the safest, highest-rated cars on the road in the world. Beyond the flagship Model S sedan as well as the falcon-winged door Model X sports utility vehicle, we plan on launching
          our new Model 3 sedan later this year at a base price of $35,000 that we expect to truly propel electric vehicles into the mainstream.</p>
      </div>
    </div>
  </div>
</div>
5
Luke Al-Saba 28 Май 2017 в 03:45

2 ответа

Лучший ответ

Это потому, что вы работаете с visibility ... измените его на display : block и display : none вы можете взглянуть на В чем разница между видимостью: скрытой и отображаемой: нет?

6
Mohamed-Yousef 28 Май 2017 в 00:54

Вы должны использовать display атрибут для этого .. попробуйте этот сайт для дальнейшего изучения выставочной собственности .. https://www.w3schools.com/cssref/pr_class_display.asp

Ваш код..

.content {
      //along with other codes
      display : none;

    }
0
Nazeer 28 Май 2017 в 01:05