backtotop

This commit is contained in:
troy 2022-02-14 12:23:22 +01:00
parent 8170b81554
commit d318faca2c
7 changed files with 104 additions and 7 deletions

View File

@ -241,3 +241,10 @@ Suche: <input type="text" onkeyup="myFilter()" id="suchstr" />
<div class="row">c</row>
</div>
```
## back to Top Button
```
<link href="/cssjs/backtotop.min.css" rel="stylesheet">
...
<script src="/cssjs/backtotop.min.js"></script>
```

24
backtotop.css Normal file
View File

@ -0,0 +1,24 @@
#back_to_top {
position: fixed;
bottom: 40px;
right: 40px;
z-index: 9999;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
background: #f5f5f5;
color: #444;
cursor: pointer;
border-radius: 15px;
padding-top: 4px;
display: none;
}
#back_to_top:hover {
background: #e9ebec;
}
#back_to_top.back_to_top-show {
display: block;
}

31
backtotop.js Normal file
View File

@ -0,0 +1,31 @@
(function() {
'use strict';
function trackScroll() {
var scrolled = window.pageYOffset;
var coords = document.documentElement.clientHeight;
console.log(coords,scrolled);
if (scrolled > coords) {
goTopBtn.classList.add('back_to_top-show');
}
if (scrolled < coords) {
goTopBtn.classList.remove('back_to_top-show');
}
}
function backToTop() {
if (window.pageYOffset > 0) {
window.scrollBy(0, -30);
setTimeout(backToTop, 0);
}
}
var goTopBtn = document.createElement("div");
goTopBtn.id = 'back_to_top';
goTopBtn.innerHTML = 'UP';
document.body.appendChild(goTopBtn);
window.addEventListener('scroll', trackScroll);
goTopBtn.addEventListener('click', backToTop);
})();

1
backtotop.min.css vendored Normal file
View File

@ -0,0 +1 @@
#back_to_top{position:fixed;bottom:40px;right:40px;z-index:9999;width:30px;height:30px;text-align:center;line-height:30px;background:#f5f5f5;color:#444;cursor:pointer;border-radius:15px;padding-top:4px;display:none}#back_to_top:hover{background:#e9ebec}#back_to_top.back_to_top-show{display:block}

2
backtotop.min.js vendored Normal file
View File

@ -0,0 +1,2 @@
!function(){"use strict";function trackScroll(){var scrolled=window.pageYOffset,coords=document.documentElement.clientHeight;console.log(coords,scrolled),scrolled>coords&&goTopBtn.classList.add("back_to_top-show"),scrolled<coords&&goTopBtn.classList.remove("back_to_top-show")}function backToTop(){window.pageYOffset>0&&(window.scrollBy(0,-30),setTimeout(backToTop,0))}var goTopBtn=document.createElement("div");goTopBtn.id="back_to_top",goTopBtn.innerHTML="UP",document.body.appendChild(goTopBtn),window.addEventListener("scroll",trackScroll),goTopBtn.addEventListener("click",backToTop)}();
//# sourceMappingURL=backtotop.min.js.map

33
backtotop.min.js.map Normal file
View File

@ -0,0 +1,33 @@
{
"version": 3,
"sources": [
"backtotop.js"
],
"names": [
"trackScroll",
"scrolled",
"window",
"pageYOffset",
"coords",
"document",
"documentElement",
"clientHeight",
"console",
"log",
"goTopBtn",
"classList",
"add",
"remove",
"backToTop",
"scrollBy",
"setTimeout",
"createElement",
"id",
"innerHTML",
"body",
"appendChild",
"addEventListener"
],
"mappings": "CAAA,WACE,aAEA,SAASA,cACP,IAAIC,SAAWC,OAAOC,YAClBC,OAASC,SAASC,gBAAgBC,aACtCC,QAAQC,IAAIL,OAAOH,UAEfA,SAAWG,QACbM,SAASC,UAAUC,IAAI,oBAErBX,SAAWG,QACbM,SAASC,UAAUE,OAAO,oBAI9B,SAASC,YACHZ,OAAOC,YAAc,IACvBD,OAAOa,SAAS,GAAI,IACpBC,WAAWF,UAAW,IAI1B,IAAIJ,SAAWL,SAASY,cAAc,OACtCP,SAASQ,GAAK,cACdR,SAASS,UAAY,KACrBd,SAASe,KAAKC,YAAYX,UAE1BR,OAAOoB,iBAAiB,SAAUtB,aAClCU,SAASY,iBAAiB,QAASR,WA7BrC",
"file": "backtotop.js"
}

View File

@ -24,7 +24,6 @@ function ajaxFeedback(e,url,css) {
function formFeedback(e,f,url,css) {
var formData = {}
//TODO form erkennen und auslesen und disablen
$(f).each(function(i, obj) {
console.log(obj);
formData[obj.name] = obj.value