Merge pull request #52 from Valik3201/feat/scrollUp

scroll Up

package.json

@@ -35,6 +35,7 @@
     "axios": "^1.6.2",
     "lazysizes": "^5.3.2",
     "firebase": "^10.7.1",
-    "notiflix": "^3.2.6"
+    "notiflix": "^3.2.6",
+    "swiper": "^11.0.5"
   }
 }

src/index.html

@@ -36,6 +36,8 @@
     <!-- Plik HTML zawierający kod dla modalnego okna z informacjami o książce -->
     <include src="./partials/modals/book-popup.html"></include>
 
+    <button id="scrollUp"><svg width="20px" height="20px"><use href="/src/images/icons.svg#icon-scroll-up"></use></svg></button>
+
     <!-- Skrypt -->
     <script src="./js/common.js" type="module"></script>
     <script src="./js/indexModules.js" type="module"></script>

src/js/common.js

@@ -2,5 +2,8 @@ import './charityData.js';
 import './mobileMenu.js';
 import './darkMode.js';
 import './auth.js';
+import './scrollUp.js';
+
 import 'lazysizes';
 import 'lazysizes/plugins/attrchange/ls.attrchange';
+

src/js/scrollUp.js

@@ -0,0 +1,16 @@
+const button = document.querySelector('#scrollUp');
+
+function scrollUp() {
+  window.scrollTo(0, 0);
+}
+
+function scrollFunction() {
+  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+    button.style.display = 'block';
+  } else {
+    button.style.display = 'none';
+  }
+}
+
+button.addEventListener('click', scrollUp);
+document.addEventListener('scroll', scrollFunction);

src/partials/home/home-foundation-slider.html

@@ -1 +1,21 @@
-<div class="foundation-list"></div>
+<div class="foundation-list">
+    <div class="swiper">
+        <!-- Additional required wrapper -->
+        <div class="swiper-wrapper">
+          <!-- Slides -->
+          <div class="swiper-slide">Slide 1</div>
+          <div class="swiper-slide">Slide 2</div>
+          <div class="swiper-slide">Slide 3</div>
+          ...
+        </div>
+        <!-- If we need pagination -->
+        <div class="swiper-pagination"></div>
+
+        <!-- If we need navigation buttons -->
+        <div class="swiper-button-prev"></div>
+        <div class="swiper-button-next"></div>
+
+        <!-- If we need scrollbar -->
+        <div class="swiper-scrollbar"></div>
+      </div>
+</div>

src/shopping-list.html

@@ -26,6 +26,8 @@
       <include src="./partials/shopping-list/shopping-list-main.html"></include>
     </main>
 
+    <button id="scrollUp" onclick="scrollUp()">Scroll Up</button>
+
     <!-- Skrypt -->
     <script src="./js/common.js" type="module"></script>
     <script src="./js/shoppingListModules.js" type="module"></script>

src/style/scss/_scrollUp.scss

@@ -0,0 +1,38 @@
+#scrollUp {
+  z-index: 1000;
+  cursor: pointer;
+  width: 50px;
+  height: 50px;
+  opacity: 0.7;
+  fill: #000;
+
+  background-color: #fcfcfc;
+  border: none;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+  transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  position: fixed;
+  bottom: 95px;
+  right: 30px;
+  transform: scale(1);
+  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
+
+}
+
+#scrollUp:hover {
+  opacity: 1;
+  transform: scale(1.1);
+}
+
+#scrollUp svg use {
+  fill: #000;
+  height: 20px;
+  width: 20px;
+}
+
+#scrollUp:hover svg {
+  fill: #f8d24e;
+}

src/style/scss/main.css

@@ -4,6 +4,7 @@
 @import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,[email protected],400;9..40,500;9..40,700&display=swap");
 * {
   box-sizing: border-box;
+  scroll-behavior: smooth;
 }
 
 html,
@@ -362,4 +363,38 @@ body {
   [data-content=category] .books__book {
     flex-basis: calc(20% - 25px);
   }
+}
+#scrollUp {
+  z-index: 1000;
+  cursor: pointer;
+  width: 50px;
+  height: 50px;
+  opacity: 0.7;
+  fill: #000;
+  background-color: #fcfcfc;
+  border: none;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+  transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  position: fixed;
+  bottom: 95px;
+  right: 30px;
+  transform: scale(1);
+  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
+}
+
+#scrollUp:hover {
+  opacity: 1.1;
+  background-color: rgba(252, 252, 252, 0.5490196078);
+  cursor: pointer;
+}
+
+#top-btn svg {
+  fill: #000;
+}
+
+#top-btn:hover svg {
+  fill: #f8d24e;
 }/*# sourceMappingURL=main.css.map */

src/style/scss/main.scss

@@ -4,3 +4,4 @@
 @import './home';
 @import './category-list';
 @import './books';
+@import './scrollUp';