Make my buttons move with me when I scroll down. CSS, HTML

Coding Help
, ,
1

I would like to make my buttons move with the screen when I scroll down.

How it looks:

image
image1917Ă—921 122 KB

image
image1919Ă—968 36.1 KB

The code:

<button
      onclick="document.getElementById('id01').style.display='block'"
      class="w3-btn"
      style="
             background-color: #49587f; 
             color:#8596ab;
             margin-left: 1810px;
        margin-top:  790px;
        border-radius: 50px;
font: normal 24px/50px Arial, Helvetica, sans-serif;
"
    >
      +
    </button>

    <div id="id01" class="w3-modal">
      <div style="background-color: #31363f; border-radius: 10px; " class="w3-modal-content w3-animate-top w3-card-8"> <!-- Remove border-radius: 10px; if you don't want the round popup -->
        <header style="background-color: #22252b; border-radius: 10px; " class="w3-container"> <!-- Remove border-radius: 10px; if you don't want the round popup -->
          <button
            onclick="document.getElementById('id01').style.display='none'"
            class="w3-closebtn w3-btn"
            style="
             background-color: #1c1f24; 
            border-radius: 2px;
            margin-top:  10px;
            margin-bottom:  10px;
            margin-left: -6px;
            "
          ><!--margin:left 830px for the exit button on the right -->
            &times;
          </button>
        </header>
        <div style="
        margin-left: -1000px;
        margin-top: 100px;
        width: 20px;
        " class="w3-container">
          <div class="header">
            <nav>
              <ul class="cf">
                <li>
                  <a class="dropdown" href="/api/v1/endpoints" target="_blank">Endpoints</a> <!-- target="_blank" opens the href in a new window-->
                </li>
              </ul>
            </nav>
          </div>
          <p></p>
        </div>
      </div>
    </div>
  </header>
  <div style="
  margin-left: -1000px;
  margin-top: -100px;
  position: absolute;
top: 1080px;
  " class="w3-container">
    <div class="header">
      <nav>
        <ul class="cf">
          <li>
            <a class="dropdown" href="https://github.com/Readtt" target="_blank">Github</a>
          </li>
        </ul>
      </nav>
    </div>
    <p></p>
  </div>
</div>
</div>

    <script>
      // Get the modal
      var modal = document.getElementById('id01');
      
      // When the user clicks anywhere outside of the modal, close it
      window.onclick = function(event) {
        if (event.target == modal) {
          modal.style.display = "none";
        }
      }
      </script>

The capsule looking thing is a button, believe it or not.

2 
<input type="button" onClick="document.getElementById('scroll').scrollIntoView();" />

Make sure you add the id “Scroll” to your buttons
Source: https://stackoverflow.com/a/16349522

3

Or you can just add position: fixed; to the button and it will remain fixed to your viewport, even as you scroll.

3 Likes