118 lines
2.4 KiB
HTML
118 lines
2.4 KiB
HTML
<!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>
|