Bouton haut de page

**forum** · 26/01/2019, 05h11

Bonjour,

Je vous propose un nouvel élément à utiliser : Bouton haut de page

Affichez un simple petit bouton en quelques petits ligne de code pour remonter en haut de page sans avoir besoin d'un fichier image.

Très utile quand on utilise jQuery car très simple à mettre en place.

Qu'en pensez-vous ?

**Doksuri** · 28/01/2019, 10h12

Envoyé par forum

Qu'en pensez-vous ?

qu'on peut le faire sans jQuery

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!doctype html>
<html lang="fr-FR">
	<head>
		<style>
                        #scrolltotop{z-index:1000;position:fixed;bottom:25px;right:35px;cursor:pointer;width:40px;height:40px;background:#111111; opacity: 0; transition: opacity .2s ease-in}
                        #scrolltotop div{width:6px;height:6px;transform:rotate(-135deg);border:solid #ffffff;border-width:0 3px 3px 0;padding:3px;margin-top:16px;margin-left:12px;}
                        #scrolltotop.show { opacity:1; transition: opacity .5s ease-in; }
                </style>
	</head>
	<body>
		test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
		<div id="scrolltotop"><div></div></div>
		<script>
                        document.getElementById('scrolltotop').addEventListener('click', () => {
                            window.scroll({top:0, behavior:'smooth'});
                        });
                        document.addEventListener('scroll', () => {
                            if(window.pageYOffset > 100) {
                    document.getElementById('scrolltotop').classList.add('show');
                } else {
                                document.getElementById('scrolltotop').classList.remove('show');
                                }
                        });
                </script>
	</body>
</html>

Bouton haut de page

Téléchargez

Vue hybride

Discussions similaires

Partager

Partager