vrai bouton "haut de page" digne de ce nom

2022-09-17 11:07:57 +02:00 · 2022-09-17 11:07:57 +02:00 · e2c9666fab
commit e2c9666fab
parent 6dc437a603
3 changed files with 27 additions and 3 deletions
--- a/index.php
+++ b/index.php
@ -8,8 +8,23 @@
    <meta property="og:description" content="Albums d'illustrations des waifus d'Esenjin.">

    <link rel="shortcut icon" id="favicon" href="favicon.ico">
-
    <link href='style.css' rel='stylesheet' type='text/css'>
+
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
+    <script>
+            jQuery(function(){
+                $(function () {
+                    $(window).scroll(function () {
+                        if ($(this).scrollTop() > 200 ) { 
+                            $('#scrollUp').css('right','10px');
+                        } else { 
+                            $('#scrollUp').removeAttr( 'style' );
+                        }
+ 
+                    });
+                });
+            });
+    </script>
 </head>

 <body>
@ -45,6 +60,8 @@ if(!empty($dossier));
        }
 
 ?>
-<center><a href="#">&#8632; retourer là-haut !</a></center>
+<div id="scrollUp">
+    <a href="#top"><img src="top.png"/></a>
+</div>
 </br>
 </body>
--- a/style.css
+++ b/style.css
@ -17,7 +17,14 @@ div {
 }

 img {
-	width: 600px;
+	max-width: 600px;
 	height: auto;
 	border-radius: 12px;
 }
+
+#scrollUp {
+position: fixed;
+bottom : 10px;
+right: -100px;
+opacity: 0.5;
+}
--- a/top.png
+++ b/top.png