Add scrollToTop javascript function

This commit is contained in:
Grégory Soutadé 2017-04-17 20:37:26 +02:00
parent cef1194ad0
commit d48d1e94a9
2 changed files with 50 additions and 1 deletions

View File

@ -81,6 +81,21 @@ else
echo "CLEAR_TIME=$CLEAR_TIME; // Clear master key after 15 minutes\n"; echo "CLEAR_TIME=$CLEAR_TIME; // Clear master key after 15 minutes\n";
echo "CRYPTO_V1_COMPATIBLE=$CRYPTO_V1_COMPATIBLE;\n"; echo "CRYPTO_V1_COMPATIBLE=$CRYPTO_V1_COMPATIBLE;\n";
?> ?>
document.addEventListener('DOMContentLoaded', function() {
window.onscroll = function(ev) {
document.getElementById("buttonTop").className = (window.pageYOffset > 500) ? "cVisible" : "cInvisible";
};
});
function scrollToTop()
{
if (window.pageYOffset == 0)
return;
target = (window.innerHeight) ? window.innerHeight/5 : 200;
toScroll = (window.pageYOffset > target) ? target : window.pageYOffset;
window.scrollBy(0, -toScroll);
setTimeout(scrollToTop, 24);
}
</script> </script>
<script src="resources/misc.js"></script> <script src="resources/misc.js"></script>
<script src="resources/gpass.js"></script> <script src="resources/gpass.js"></script>
@ -88,6 +103,7 @@ else
<title>gPass : global Password</title> <title>gPass : global Password</title>
</head> </head>
<body onload="start();"> <body onload="start();">
<div><a id="buttonTop" class="cInvisible" onclick="scrollToTop();"></a></div>
<div id="logo"> <div id="logo">
<a href="http://indefero.soutade.fr/p/gpass"><img src="resources/gpass.png" alt="logo"/></a> <a href="http://indefero.soutade.fr/p/gpass"><img src="resources/gpass.png" alt="logo"/></a>
</div> </div>

View File

@ -127,3 +127,36 @@ body {
width: 100px; width: 100px;
z-index: 0; z-index: 0;
} }
/* From http://www.trucsweb.com/tutoriels/javascript/retour-haut/ */
a#buttonTop{
border-radius:3px;
padding:10px;
font-size:3em;
text-align:center;
color:#fff;
background:rgba(0, 0, 0, 0.25);
position:fixed;
right:3%;
opacity:1;
z-index:99999;
transition:all ease-in 0.2s;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
text-decoration: none;
}
a#buttonTop:before{ content: "\25b2"; }
a#buttonTop:hover{
background:rgba(0, 0, 0, 1);
transition:all ease-in 0.2s;
}
a#buttonTop.cInvisible{
bottom:-35px;
opacity:0;
transition:all ease-in 0.5s;
}
a#buttonTop.cVisible{
bottom:20px;
opacity:1;
}