Search code examples
javascripthtmlcssscrollposition

How to make scrolling arrows disappear at top and bottom? JavaScript

Without using jQuery (because I found a lot of answers for this question using it but I'm trying to not to since I'm still getting a grip with vanilla JS) I want to have my top arrow disappear when I'm at the top of the page and my bottom arrow disappear when I'm at the bottom of the page.

I feel like I could achieve this initially having the top arrow with visibility: hidden and then by creating a function that recognizes that the window is past a certain point and it would appear at that point (same thing to the bottom, I would assume) but I can't figure out how to translate that to JavaScript.

CodePen: https://codepen.io/ItzaMi/pen/wRyxxO

<body>
<nav>
    <div id="nav-square">
        <h1>STATIC</h1>
        <ul>
            <li class="nav-list"><a href=#home>Home</a></li>
            <li class="nav-list"><a href=#contacts>Contacts</a></li>
            <li class="nav-list"><a href=#aboutus>About Us</a></li>
            <li class="nav-list"><a href=#moreaboutus>More About Us</a></li>
        </ul>    
    </div>
</nav>
<div id="info">
    <div id="main-content">
        <div id="home" class="section">
            <img src="img/arrow_reverse.png" class="arrow_top" onclick="scrollingtop()">
            <h1>Home</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, perferendis illum modi necessitatibus laborum distinctio dolorem quia inventore ullam omnis ex possimus, soluta repellendus! Iure voluptas laboriosam exercitationem beatae reprehenderit quaerat ex debitis quas autem doloremque, ea eligendi modi maxime magni dicta voluptatem rem eius tempora deleniti distinctio! Suscipit dignissimos voluptates temporibus eum adipisci recusandae ad tempora sint sequi quidem iste vel ipsam aperiam eligendi iusto assumenda reprehenderit distinctio quis, tempore accusantium possimus minima impedit. Odit consequuntur dolorum sit iure, assumenda atque ratione ipsam officiis quae consectetur eos fuga omnis molestiae! Fuga dolorem laboriosam nostrum dicta facere ullam aspernatur, atque, maiores eius hic labore asperiores molestiae? Eum illum iure quibusdam, non perspiciatis fuga tempora quis culpa provident consectetur odit ut ab, voluptatum, aliquam magnam! Corporis, deserunt molestias hic eligendi amet eos omnis asperiores facilis accusantium blanditiis minima magnam cupiditate pariatur? Cum recusandae nisi modi dolorem deleniti ab labore reprehenderit perspiciatis tenetur. Facilis nihil enim qui reiciendis alias soluta ratione repellendus possimus quaerat magni, omnis aperiam aliquam eum asperiores deserunt fugiat sunt, eius itaque dolores ad, modi repudiandae! Eum, modi facere animi similique fuga omnis. Illo architecto optio fuga repellendus doloremque eos, commodi soluta reiciendis accusantium unde, esse nemo voluptates veritatis?</p>
            <img src="img/circle-arrow-icon.png" class="arrow_bottom" onclick="scrollingbottom()">
        </div>
        <div id="contacts" class="section">
            <!-- <img src="img/arrow_reverse.png" class="arrow" onclick="scrollingtop()"> -->
            <h1>Contacts</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, perferendis illum modi necessitatibus laborum distinctio dolorem quia inventore ullam omnis ex possimus, soluta repellendus! Iure voluptas laboriosam exercitationem beatae reprehenderit quaerat ex debitis quas autem doloremque, ea eligendi modi maxime magni dicta voluptatem rem eius tempora deleniti distinctio! Suscipit dignissimos voluptates temporibus eum adipisci recusandae ad tempora sint sequi quidem iste vel ipsam aperiam eligendi iusto assumenda reprehenderit distinctio quis, tempore accusantium possimus minima impedit. Odit consequuntur dolorum sit iure, assumenda atque ratione ipsam officiis quae consectetur eos fuga omnis molestiae! Fuga dolorem laboriosam nostrum dicta facere ullam aspernatur, atque, maiores eius hic labore asperiores molestiae? Eum illum iure quibusdam, non perspiciatis fuga tempora quis culpa provident consectetur odit ut ab, voluptatum, aliquam magnam! Corporis, deserunt molestias hic eligendi amet eos omnis asperiores facilis accusantium blanditiis minima magnam cupiditate pariatur? Cum recusandae nisi modi dolorem deleniti ab labore reprehenderit perspiciatis tenetur. Facilis nihil enim qui reiciendis alias soluta ratione repellendus possimus quaerat magni, omnis aperiam aliquam eum asperiores deserunt fugiat sunt, eius itaque dolores ad, modi repudiandae! Eum, modi facere animi similique fuga omnis. Illo architecto optio fuga repellendus doloremque eos, commodi soluta reiciendis accusantium unde, esse nemo voluptates veritatis?</p>
            <!-- <img src="img/circle-arrow-icon.png" class="arrow" onclick="scrollingbottom()"> -->
        </div>
        <div id="aboutus" class="section">
            <!-- <img src="img/arrow_reverse.png" class="arrow" onclick="scrollingtop()"> -->
            <h1 >About Us</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, perferendis illum modi necessitatibus laborum distinctio dolorem quia inventore ullam omnis ex possimus, soluta repellendus! Iure voluptas laboriosam exercitationem beatae reprehenderit quaerat ex debitis quas autem doloremque, ea eligendi modi maxime magni dicta voluptatem rem eius tempora deleniti distinctio! Suscipit dignissimos voluptates temporibus eum adipisci recusandae ad tempora sint sequi quidem iste vel ipsam aperiam eligendi iusto assumenda reprehenderit distinctio quis, tempore accusantium possimus minima impedit. Odit consequuntur dolorum sit iure, assumenda atque ratione ipsam officiis quae consectetur eos fuga omnis molestiae! Fuga dolorem laboriosam nostrum dicta facere ullam aspernatur, atque, maiores eius hic labore asperiores molestiae? Eum illum iure quibusdam, non perspiciatis fuga tempora quis culpa provident consectetur odit ut ab, voluptatum, aliquam magnam! Corporis, deserunt molestias hic eligendi amet eos omnis asperiores facilis accusantium blanditiis minima magnam cupiditate pariatur? Cum recusandae nisi modi dolorem deleniti ab labore reprehenderit perspiciatis tenetur. Facilis nihil enim qui reiciendis alias soluta ratione repellendus possimus quaerat magni, omnis aperiam aliquam eum asperiores deserunt fugiat sunt, eius itaque dolores ad, modi repudiandae! Eum, modi facere animi similique fuga omnis. Illo architecto optio fuga repellendus doloremque eos, commodi soluta reiciendis accusantium unde, esse nemo voluptates veritatis?</p>
            <!-- <img src="img/circle-arrow-icon.png" class="arrow" onclick="scrollingbottom()"> -->
        </div>
        <div id="moreaboutus" class="section">
            <!-- <img src="img/arrow_reverse.png" class="arrow" onclick="scrollingtop()"> -->
            <h1>More About Us</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, perferendis illum modi necessitatibus laborum distinctio dolorem quia inventore ullam omnis ex possimus, soluta repellendus! Iure voluptas laboriosam exercitationem beatae reprehenderit quaerat ex debitis quas autem doloremque, ea eligendi modi maxime magni dicta voluptatem rem eius tempora deleniti distinctio! Suscipit dignissimos voluptates temporibus eum adipisci recusandae ad tempora sint sequi quidem iste vel ipsam aperiam eligendi iusto assumenda reprehenderit distinctio quis, tempore accusantium possimus minima impedit. Odit consequuntur dolorum sit iure, assumenda atque ratione ipsam officiis quae consectetur eos fuga omnis molestiae! Fuga dolorem laboriosam nostrum dicta facere ullam aspernatur, atque, maiores eius hic labore asperiores molestiae? Eum illum iure quibusdam, non perspiciatis fuga tempora quis culpa provident consectetur odit ut ab, voluptatum, aliquam magnam! Corporis, deserunt molestias hic eligendi amet eos omnis asperiores facilis accusantium blanditiis minima magnam cupiditate pariatur? Cum recusandae nisi modi dolorem deleniti ab labore reprehenderit perspiciatis tenetur. Facilis nihil enim qui reiciendis alias soluta ratione repellendus possimus quaerat magni, omnis aperiam aliquam eum asperiores deserunt fugiat sunt, eius itaque dolores ad, modi repudiandae! Eum, modi facere animi similique fuga omnis. Illo architecto optio fuga repellendus doloremque eos, commodi soluta reiciendis accusantium unde, esse nemo voluptates veritatis?</p>
        </div>
    </div>
</div>

CSS:

html {
scroll-behavior: smooth;
}

body {
height: 100vh;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}

/* Nav Bar */

nav {
grid-column: 1;
background-color: #ffffff;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 3fr 1fr;
position: fixed;
width: 50vw;
}

#nav-square {
grid-column: 2;
grid-row: 2;
background-color: #c9c9c9;
padding: 0 50px 0 50px;
margin: 0;
}

#nav-square h1 {
margin: 0;
padding: 0;
text-align: center;
font-size: 100px;
color: #17526d;
 }

#nav-square ul {
list-style-type: none;
margin: 0;
vertical-align: middle;
line-height: 50px;
padding: 20px 0 50px 0;
}

.nav-list {
font-size: 2em;
padding: 1em;
text-align: center;
}

.nav-list a {
display: block;
text-decoration: none;
color: black;
}

/* Content */

#info {
background-color: #ffffff;
display: flex;
margin: auto;
width: 45vw;
height: 100vh;
float: right;
margin-right: 5%;
position: relative;
}

#main-content {
align-items: center;
text-align: center;
line-height: 40px;
height: 100vh;
}

#main-content p {
font-size: 20px;
}

.section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
}

.arrow_top {
width: 5%;
position: fixed;
top: 0;
/* visibility: hidden; */
}

.arrow_bottom {
width: 5%;
position: fixed;
bottom: 0;
}

JavaScript:

function scrollingbottom() {
window.scrollBy(0, 1000);
}

function scrollingtop() {
window.scrollBy(0, -1000);
}
Solution

  • You can listen to the scroll event. The scoll distance can be read with 

    window.scrollY

    or 

    pageYOffset

    and then just set the visibility of your arrows like you already considered.

    In the expample I did it with the display property.

    For you to do: Check, if window.scrollY and pageYOffset cover support for all browsers. And then adapt it to your code and refine the point for hiding the bottom arrow.

    document.addEventListener('scroll', () => {

  const fromTop = window.scrollY || pageYOffset;
  const fromBottom = document.getElementById('main').getBoundingClientRect().height-fromTop;
  const upArrow = document.getElementById('upArrow');
  const downArrow = document.getElementById('downArrow');

  if (fromTop > 10) {
    upArrow.style.display = 'block';
  } else {
    upArrow.style.display = 'none';
  }

  if (fromBottom > fromTop) {
    downArrow.style.display = 'block';
  } else {
    downArrow.style.display = 'none';
  }

});
    #main {
  margin: 20px auto 20px auto;
}
#upArrow {
  position: fixed;
  top: 2px;
  margin-left: 48%;
  display: none;
}
#downArrow {
  position: fixed;
  bottom: 2px;
  margin-left:48%;
}
    <div id="main">
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
<div id="endOfPage"></div>
</div>
<div id="upArrow"><a href="#top">&uArr;</a></div>
<div id="downArrow"><a href="#endOfPage">&dArr;</a></div>