I have successfully created a website that utilizes buttons for navigation, with everything working smoothly except for the homepage. On the homepage, there seems to be excessive white space below all the content. I attempted to fix this by setting overflow to hidden, but this caused the button used for navigation to be blocked. My goal is to make the height of the first page equal to the user's screen height and allow scrolling if some content cannot fit within the initial view.
For reference, here is the codepen link: https://codepen.io/Lukie/pen/eWobYa
// JavaScript functions for scrolling behavior
function scrollDown() {
$(".home").removeClass("slideInLeft");
$(".home").addClass("slideOutUp");
$(".content").css("visibility", "visible");
$(".content").removeClass("slideOutDown");
$(".content").addClass("slideInUp");
}
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;
}
/* CSS styles for various elements */
.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>