backtotop
This commit is contained in:
troy
parent
8170b81554
commit
d318faca2c
13
README.md
13
README.md
@ -121,7 +121,7 @@ git submodule add https://git.seemsleg.it/pub/cssjs-func-lib cssjs
|
||||
|
||||
<script>ClassicEditor
|
||||
.create( document.querySelector( '.editor' ), {
|
||||
|
||||
|
||||
toolbar: {
|
||||
items: [
|
||||
'heading',
|
||||
@ -178,7 +178,7 @@ git submodule add https://git.seemsleg.it/pub/cssjs-func-lib cssjs
|
||||
]
|
||||
},
|
||||
licenseKey: '',
|
||||
|
||||
|
||||
} )
|
||||
.then( editor => {
|
||||
window.editor = editor;
|
||||
@ -240,4 +240,11 @@ Suche: <input type="text" onkeyup="myFilter()" id="suchstr" />
|
||||
<div class="row">b</row>
|
||||
<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
24
backtotop.css
Normal 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
31
backtotop.js
Normal 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
1
backtotop.min.css
vendored
Normal 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
2
backtotop.min.js
vendored
Normal 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
33
backtotop.min.js.map
Normal 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"
|
||||
}
|
||||
@ -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
|
||||
@ -115,7 +114,7 @@ function successMarker(e,css) {
|
||||
var cursorX = p.x
|
||||
var cursorY = p.y
|
||||
console.log('OK',cursorX,cursorY);
|
||||
|
||||
|
||||
o = $('<div style="position: absolute; top:'+cursorY+'px; left: '+ cursorX +'px; width: 40px; height: 40px; z-index: 999; fill: green; pointer-events: none;'+css+'"><svg version="1.1" style="-webkit-filter: drop-shadow( 0 0 4px rgba(0, 0, 0, .9)); filter: drop-shadow( 0 0 4px rgba(0, 0, 0, .9));" x="0px" y="0px" viewBox="0 0 1000 1000" xml:space="preserve"><g><path d="M959.4,469.4c-16.9,0-30.6,13.7-30.6,30.6c0,236.4-192.3,428.7-428.7,428.7S71.3,736.4,71.3,500C71.3,263.6,263.6,71.3,500,71.3c93.7,0,182.7,29.7,257.4,85.8c13.5,10.2,32.7,7.4,42.9-6.1c10.2-13.5,7.4-32.7-6.1-42.8C708.8,43.9,607.1,10,500,10C229.8,10,10,229.8,10,500c0,270.2,219.8,490,490,490s490-219.8,490-490C990,483.1,976.3,469.4,959.4,469.4z"/><path d="M215.4,447.7c-12-12-31.3-12-43.3,0c-12,12-12,31.3,0,43.3l245,245c6,6,13.8,9,21.7,9c7.8,0,15.7-3,21.7-9L981,215.4c12-12,12-31.3,0-43.3c-12-12-31.3-12-43.3,0l-499,499L215.4,447.7z"/></g></svg></div>');
|
||||
$( "body" ).append( o );
|
||||
$(o).fadeOut(5000);
|
||||
@ -127,7 +126,7 @@ function warnMarker(e,css) {
|
||||
var cursorX = p.x
|
||||
var cursorY = p.y
|
||||
console.log('WARN',cursorX,cursorY);
|
||||
|
||||
|
||||
o = $('<div style="position: absolute; top:'+cursorY+'px; left: '+ cursorX +'px; width: 40px; height: 40px; fill: #ff0; z-index: 999; pointer-events: none;'+css+'"><svg version="1.1" style="-webkit-filter: drop-shadow( 0 0 4px rgba(0, 0, 0, .9)); filter: drop-shadow( 0 0 4px rgba(0, 0, 0, .9));" x="0px" y="0px" viewBox="0 0 100 125"><g transform="translate(0,-952.36218)"><path style="text-indent:0;text-transform:none;direction:ltr;block-progression:tb;baseline-shift:baseline;color:#000000;enable-background:accumulate;" d="m 49.999548,962.36215 c -2.77446,0 -5.29918,1.3853 -6.71875,3.7812 L 5.0307975,1030.7997 c -1.41991,2.4028 -1.39108,5.3495 0.0312,7.75 1.27219,2.1453 3.65785,3.8194 6.4374995,3.8125 l 77.000001,0 c 2.77928,0.01 5.16552,-1.6676 6.4375,-3.8125 1.42362,-2.4007 1.45245,-5.347 0.0312,-7.75 l -38.25,-64.65635 c -1.41947,-2.3959 -3.94419,-3.7812 -6.71865,-3.7812 z m 0,6 c 0.56422,0 1.30991,0.4174 1.5625,0.8438 l 38.21875,64.65625 c 0.25251,0.427 0.25314,1.1981 0,1.625 -0.40478,0.6826 -0.71493,0.8764 -1.28125,0.875 l -77.000001,0 c -0.56593,10e-4 -0.8767,-0.1928 -1.28125,-0.875 -0.2530395,-0.427 -0.2524095,-1.1979 0,-1.625 l 38.218751,-64.65625 c 0.25257,-0.4263 0.99828,-0.8438 1.5625,-0.8438 z m 0,16 c -3.31371,0 -6,2.6863 -6,6 l 1,22.00005 c 0,2.7614 2.23857,5 5,5 2.76143,0 5,-2.2386 5,-5 l 1,-22.00005 c 0,-3.3137 -2.68629,-6 -6,-6 z m 0,35.00005 c -3.86598,0 -7,3.134 -7,7 0,3.8659 3.13402,7 7,7 3.86598,0 7,-3.1341 7,-7 0,-3.866 -3.13402,-7 -7,-7 z" /></g></svg></div>');
|
||||
$( "body" ).append( o );
|
||||
$(o).fadeOut(5000);
|
||||
@ -139,7 +138,7 @@ function errorMarker(e,css) {
|
||||
var cursorX = p.x
|
||||
var cursorY = p.y
|
||||
console.log('ERR',cursorX,cursorY);
|
||||
|
||||
|
||||
o = $('<div style="position: absolute; top:'+cursorY+'px; left: '+ cursorX +'px; width: 40px; height: 40px; fill: red; z-index: 999; pointer-events: none;'+css+'"><svg version="1.0" style="-webkit-filter: drop-shadow( 0 0 4px rgba(0, 0, 0, .9)); filter: drop-shadow( 0 0 4px rgba(0, 0, 0, .9));" x="0px" y="0px" viewBox="0 0 100 125" xml:space="preserve"><g><path fill="#000000" d="M50,14.996c-19.333,0-35.004,15.671-35.004,35.004c0,19.332,15.671,35.004,35.004,35.004 c19.332,0,35.004-15.672,35.004-35.004C85.004,30.667,69.332,14.996,50,14.996z M50,79.004c-15.993,0-29.004-13.012-29.004-29.004 c0-15.993,13.011-29.004,29.004-29.004c15.992,0,29.004,13.011,29.004,29.004C79.004,65.992,65.992,79.004,50,79.004z"/><polygon fill="#000000" points="70.578,36.423 63.578,29.419 50,42.998 36.421,29.419 29.421,36.423 43,50.002 29.421,63.576 36.421,70.58 50,57.002 63.578,70.58 70.578,63.576 57.004,50.002 "/></g></svg></div>');
|
||||
$( "body" ).append( o );
|
||||
$(o).fadeOut(5000);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user