Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 898fd06

Browse files
Adding button to top
1 parent 98863fa commit 898fd06

File tree

9 files changed

+62
-5
lines changed

9 files changed

+62
-5
lines changed

‎app/js/script.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ const HEADERS = {
3030
}
3131

3232
// Definimos los elementos del DOM que necesitaremos.
33+
let topBtn = document.getElementById('topBtn')
3334
let loadMoreBtn = document.getElementById('loadMoreBtn');
3435
let errorAlert = document.getElementById('errorAlert');
3536
let clearInputButton = document.getElementById('clearInput');
@@ -191,6 +192,16 @@ searchForm.addEventListener('submit', (e) => getSearchedPhotos(e));
191192
loadMoreBtn.addEventListener('click', () => loadMorePhotos());
192193
// Evento click del botón para limpiar el input y la galería.
193194
clearInputButton.addEventListener('click', () => clearInputAndGallery());
195+
// Evento para el botón de volver arriba.
196+
window.addEventListener("scroll", () => {
197+
if (window.scrollY > 1){
198+
// Si se hace scroll, se muestra el botón cambiandole el display.
199+
topBtn.style.display = 'flex';
200+
}else if(window.scrollY < 1){
201+
// Si se vuelve a la parte superior, se vuelve a ocultar el botón.
202+
topBtn.style.display = 'none';
203+
}
204+
})
194205

195206
/*******************/
196207

‎app/scss/base/base.scss

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
@use '../util/theme.scss' as *;
22
@use '../util/classes.scss' as *;
33
@use '../util/breakpoints.scss' as *;
4+
@use '../util/mixins.scss' as *;
5+
6+
html{
7+
scroll-behavior: smooth;
8+
}
49

510
body{
611
font-family: 'Nunito', sans-serif;
@@ -22,3 +27,25 @@ h1{
2227
margin-block: 3rem;
2328
}
2429
}
30+
31+
.btn-top{
32+
@include flex(center, center, row);
33+
display: none;
34+
position: fixed;
35+
right: 4rem;
36+
bottom: 4rem;
37+
height: 50px;
38+
width: 50px;
39+
background-color: var(--clr-bg-top-btn);
40+
border-radius: 50%;
41+
text-decoration: none;
42+
transition: all .4s ease;
43+
44+
&:hover{
45+
transform: translateY(-5px);
46+
}
47+
48+
i{
49+
color: var(--clr-text-top-btn);
50+
}
51+
}

‎app/scss/components/footer.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77

88
&__content{
99
background-color: var(--clr-bg-footer);
10-
height: 30vh;
1110
}
1211

1312
&__copyright{

‎app/scss/util/theme.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@
1818
--clr-bg-footer: #102028;
1919
--clr-bg-footer-2: #182830;
2020
--clr-text-footer: #e8e8e8;
21+
// Top Btn
22+
--clr-bg-top-btn: #102028;
23+
--clr-text-top-btn: #b8c8c8;
2124
}
2225

2326
.dark-theme{
@@ -40,4 +43,7 @@
4043
--clr-bg-footer: #17191f;
4144
--clr-bg-footer-2: #1a1c22;
4245
--clr-text-footer: #e8e8e8;
46+
// Top Btn
47+
--clr-bg-top-btn: #b8c8c8;
48+
--clr-text-top-btn: #102028;
4349
}

‎dist/script.js

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/script.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/style.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/style.css.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1515
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
1616
</head>
17-
<body>
17+
<bodyid="top">
1818
<header>
1919
<div class="topbar">
2020
<div class="container">
@@ -76,6 +76,9 @@
7676
<h6 class="footer__copyright--text">&copy; PhotoSearch 2022 - Todos los derechos reservados</h6>
7777
</section>
7878
</footer>
79+
80+
<a class="btn-top" id="topBtn" href="#top"><i class="fa-solid fa-arrow-up"></i></a>
81+
7982
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
8083
<script src="dist/script.js"></script>
8184
</body>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /