Bouton pour remonter en haut d'une page web

Bouton « Scroll to Top » en bas de page

Pour remonter en haut de page



Scroll 1

Code HTML

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">

<!-- BALISES META EN RELATION AVEC LE FICHIER JAVASCRIPT -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- /Fin -->

<title>Bouton "Back-to-top" 3</title>

<!-- APPEL DU FICHIER CSS -->
<link rel="stylesheet" href="bouton-up.css">
<!-- /Fin -->

</head>

<body style="background:#7b46a0;">

<!-- HAUTEUR DE LA PAGE CONSTRUITE AVEC UNE IMAGE -->
<div>
<img src="https://cdn.shopify.com/s/files/1/0285/7707/1186/files/Scroll-fond.jpg?v=1631816767" width="100%">
</div>
<!-- /Fin -->

<!-- LE CURSEUR -->
<a href="#" class="to-top">
<div>O</div>
</a>
<!-- /Fin -->

<!-- APPEL DU FICHIER JAVA SCRIPT -->
<script src="bouton-up.js"></script>
<!-- /Fin -->

</body>

</html>


Code CSS

sur fichier séparé

@charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
}

html {
scroll-behavior: smooth;
}

.to-top {
width:50px;
height:50px;
text-decoration:none;
margin-bottom:10px;
background:#94db01;
color:#7b46a0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
position: fixed;
bottom: 0px;
right:30px;
opacity:0;
transition: all .6s;
}

.to-top.active {
bottom:0px;
opacity:1;
}



Code JAVASCRIPT

// JavaScript Document
const toTop = document.querySelector(".to-top");

window.addEventListener("scroll", () => {
if (window.pageYOffset > 100) {
toTop.classList.add("active");
} else {
toTop.classList.remove("active");
}
})



Scroll 2

Code HTML

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">

<!-- BALISES META EN RELATION AVEC LE FICHIER JAVASCRIPT -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- /Fin -->

<title>Bouton "Back-to-top" 2</title>

<!-- Appel du fichier CSS -->
<link href="bouton-up-2.css" rel="stylesheet" type="text/css">
<!-- /Fin -->

</head>

<body style="background:#7b46a0;">

<!-- HAUTEUR DE LA PAGE CONSTRUITE AVEC UNE IMAGE -->
<div>
<img src="https://cdn.shopify.com/s/files/1/0285/7707/1186/files/Scroll-fond.jpg?v=1631816767" width="100%">
</div>
<!-- /Fin -->

<!-- LE CURSEUR -->
<a href="#" class="to-top">
<div style="font-size:60px;">&#x2B06;</div>
</a>
<!-- /Fin -->

<!-- APPEL DU FICHIER JAVA SCRIPT -->
<script src="bouton-up-2.js"></script>
<!-- /Fin -->

</body>

</html>

Code CSS - fichier séparé

@charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
}

html {
scroll-behavior: smooth;
}

.to-top {
width:100px;
height:100px;
text-decoration:none;
margin-bottom:10px;
background:#94db01;
color:#7b46a0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
position: fixed;
bottom: 0px;
right:30px;
opacity:0;
transition: all .6s;
}

.to-top.active {
bottom:0px;
opacity:1;
}

Code JAVASCRIPT - fichier séparé

// JavaScript Document
const toTop = document.querySelector(".to-top");

window.addEventListener("scroll", () => {
if (window.pageYOffset > 100) {
toTop.classList.add("active");
} else {
toTop.classList.remove("active");
}
})



Scroll 3

Code HTML

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">

<!-- BALISES META EN RELATION AVEC LE FICHIER JAVASCRIPT -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- /Fin -->

<title>Bouton "Back-to-top" 3</title>

<!-- APPEL DU FICHIER CSS -->
<link href="bouton-up-3..css" rel="stylesheet" type="text/css">
<!-- /Fin -->

</head>

<body style="background:#7b46a0;">

<!-- HAUTEUR DE LA PAGE CONSTRUITE AVEC UNE IMAGE -->
<div>
<img src="https://cdn.shopify.com/s/files/1/0285/7707/1186/files/Scroll-fond.jpg?v=1631816767" width="100%">
</div>
<!-- /Fin -->

<!-- LE CURSEUR -->
<a href="#" class="to-top">
<div><img src="https://cdn.shopify.com/s/files/1/0285/7707/1186/files/fleche-3.png?v=1631816422" width="75" height="42" alt="Curseur">
</div>
</a>
<!-- /Fin -->


<!-- APPEL DU FICHIER JAVA SCRIPT -->
<script src="bouton-up-3.js"></script>
<!-- /Fin -->

</body>

</html>

Code CSS - fichier séparé

@charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
}

html {
scroll-behavior: smooth;
}

.to-top {
width:75px;
height:40px;
text-decoration:none;
color:#7b46a0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
position: fixed;
bottom: 0px;
right:30px;
opacity:0;
transition: all .6s;
}

.to-top.active {
bottom:0px;
opacity:1;
}

Code JAVASCRIPT - fichier séparé

// JavaScript Document
const toTop = document.querySelector(".to-top");

window.addEventListener("scroll", () => {
if (window.pageYOffset > 100) {
toTop.classList.add("active");
} else {
toTop.classList.remove("active");
}
})



Scroll 4

Code HTML

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">

<!-- BALISES META EN RELATION AVEC LE FICHIER JAVASCRIPT -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- /Fin -->

<title>Bouton "Back-to-top"</title>

<!-- APPEL DU FICHIER CSS -->
<link href="bouton-up-4.css" rel="stylesheet" type="text/css">
<!-- /Fin -->

</head>

<body style="background:#7b46a0;">

<!-- HAUTEUR DE LA PAGE CONSTRUITE AVEC UNE IMAGE -->
<div>
<img src="https://cdn.shopify.com/s/files/1/0285/7707/1186/files/Scroll-fond.jpg?v=1631816767" width="100%">
</div>
<!-- /Fin -->

<!-- LE CURSEUR -->
<a href="#" class="to-top">
<div><img src="https://cdn.shopify.com/s/files/1/0285/7707/1186/files/fleche_4.png?v=1631816489" width="72" height="49" alt="Curseur top"></div>
</a>
<!-- /Fin -->

<!-- APPEL DU FICHIER JAVA SCRIPT -->
<script src="bouton-up-4.js"></script>
<!-- /Fin -->

</body>

</html>

Code CSS - fichier séparé

@charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
}

html {
scroll-behavior: smooth;
}

.to-top {
width:70px;
height:50px;
text-decoration:none;
margin-bottom:10px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
position: fixed;
bottom: 0px;
right:30px;
opacity:0;
transition: all .6s;
}

.to-top.active {
bottom:0px;
opacity:1;
}

Code JAVASCRIPT - fichier séparé

// JavaScript Document
const toTop = document.querySelector(".to-top");

window.addEventListener("scroll", () => {
if (window.pageYOffset > 100) {
toTop.classList.add("active");
} else {
toTop.classList.remove("active");
}
})



Scroll 5

Code HTML CSS et JAVA réunis

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">

<!-- BALISES META EN RELATION AVEC LE FICHIER JAVASCRIPT -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- /Fin -->

<title>Bouton "Back-to-top"</title>
<style>

/* CODE CSS RAPATRIE DANS LA PAGE WEB */
* {
margin:0;
padding:0;
}

html {
scroll-behavior: smooth;
}

.to-top {
width:50px;
height:50px;
text-decoration:none;
margin-bottom:10px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
position: fixed;
bottom: 0px;
right:30px;
opacity:0;
transition: all .6s;
}

.to-top.active {
bottom:0px;
opacity:1;
}
</style>
</head>

<body style="background:#7b46a0;">

<!-- HAUTEUR DE LA PAGE CONSTRUITE AVEC UNE IMAGE -->
<div>
<img src="https://cdn.shopify.com/s/files/1/0285/7707/1186/files/Scroll-fond.jpg?v=1631816767" width="100%">
</div>
<!-- /Fin -->

<!-- LE CURSEUR -->
<a href="#" class="to-top">
<div><img src="https://cdn.shopify.com/s/files/1/0285/7707/1186/files/fleche_4.png?v=1631816489" width="72" height="49" alt="Curseur top"></div>
</a>
<!-- /Fin -->

<script>

// CODE JAVASCRIPT RAPATRIE DANS LA PAGE WEB
const toTop = document.querySelector(".to-top");

window.addEventListener("scroll", () => {
if (window.pageYOffset > 100) {
toTop.classList.add("active");
} else {
toTop.classList.remove("active");
}
})

</script>

</body>

</html>