Easy smooth scrolling instead of jumping to location on page

2024-07-25 12:35:46 -07:00 · 2024-07-25 12:35:46 -07:00 · fc38127066
commit fc38127066
parent ab6b288f58
1 changed files with 117 additions and 0 deletions
--- a/scroll.html
+++ b/scroll.html
@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>Custom Switch</title>
+  <style>
+    .container {
+      margin-left: auto;
+      margin-right: auto;
+      padding: 25px;
+      width: 500px;
+      height: 700px;
+      border: 1px solid black;
+      overflow: scroll;
+      position: relative;
+    }
+
+    #fab {
+      text-align: right;
+      position: sticky;
+      bottom: 0px;
+      right: 25px;
+    }
+
+    #fab button {
+      width: 50px;
+      height: 50px;
+      background: rgba(0, 0, 255, 1);
+      border: 0px;
+      border-radius: 100%;
+      display: none; /* Dynamic */
+    }
+  </style>
+</head>
+<body>
+
+  <div id="container" class="container">
+    <h1>Scrolling Demo</h1>
+    <div id="text">
+      <!-- Populated with Random Lorum Ipsum -->
+    </div>
+    <div id='fab'>
+      <button>⬆️</button>
+    </div>
+  </div>
+
+  
+</body>
+
+<style>
+  h1 {
+    text-align: center;
+    font-size: 2em;
+    background-color: rgba(255, 0, 0, 0.5);
+    padding-top: inherit;
+    height: 2em;
+  }
+
+  @media(prefers-reduced-motion: no-preference) {
+    .container {
+      scroll-behavior: smooth
+    }
+  }
+
+</style>
+
+<script>
+  const fab = document.querySelector( '#fab button' )
+  const container = document.getElementById('container')
+  
+  container.addEventListener('scroll', (event) => {
+    if(container.scrollTop < 50){
+      fab.style.display = "none";
+    } else {
+      fab.style.display = "inline";
+    }
+  })
+  
+  // Jumps by Default
+  fab.addEventListener('click', (event) => {
+    container.scrollTop = 0
+  })
+
+</script>
+
+<script>
+  const getNewParagraph = textGenerator()
+  const anchorDiv = document.getElementById('text')
+  for(let i = 0; i < 15; i++){
+    const newElem = document.createElement( "p" )
+    newElem.appendChild( getNewParagraph.next().value )
+    anchorDiv.appendChild( newElem )
+  }
+
+  function* textGenerator(){
+    while(true){
+      let numWords = Math.floor(Math.random() * 50)
+      let text = getText(numWords)
+      yield document.createTextNode(text)
+    }
+
+    function getText(numWords){
+      let string = ''
+      for(let i = 0; i < numWords; i++){
+        string += getRandomWord() + ' ';
+      }
+      return string;
+    }
+
+    function getRandomWord(){
+      let options = ['lorum', 'ipsum', 'dolor', 'sit', 'amet', 'consectetur', 'adipiscing', 'elit' ]
+      return options[Math.floor(Math.random() * options.length-1)]
+    }
+  }
+</script>
+</html>