<!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>