Merge branch 'back-to-top' into 'master'

Back to top

See merge request Syndamia/syndamiadotcom!3

7 files changed, 87 insertions, 3 deletions

diff --git a/src/_footer.html b/src/_footer.html
index 9ca082f..2c4228c 100644
--- a/src/_footer.html
+++ b/src/_footer.html
@@ -1,5 +1,7 @@
 	</article>
 
+	<img id="scrollBtn" class="btnBackToTop link-tab" style="display: none" onclick="window.scrollTo(0, 0)" src="/img/chevrons-up-tabler.svg" alt="^">
+
 	<nav class="footer">
 		<a href="mailto:syndamia@protonmail.com" target="_blank" class="link-tab" title="Have a comment or suggestion? Mail me!">Have a comment or suggestion? Mail me!</a>
 		<a href="/regarding-js.html" class="link-tab" title="Regarding usage of JavaScript">Regarding usage of JavaScript</a>
@@ -20,6 +22,7 @@
 	</nav>
 
 	<script type="text/javascript" src="/scripts/image-show.js"></script>
+	<script type="text/javascript" src="/scripts/back-to-top.js"></script>
 </body>
 
 </html>
diff --git a/src/about.md b/src/about.md
index b6c5222..6757bbf 100644
--- a/src/about.md
+++ b/src/about.md
@@ -45,7 +45,7 @@ I have 3 years of learning experience with *C#*, but I have also worked with *HT
 ---
 ---
 
-> [tabler-icons](https://github.com/tabler/tabler-icons) for link icon (that I modified)
+> [tabler-icons](https://github.com/tabler/tabler-icons) for link and chevron up icons (that I modified)
 
 <div></div>
 
diff --git a/src/img/chevrons-up-tabler.svg b/src/img/chevrons-up-tabler.svg
new file mode 100644
index 0000000..7126fbb
--- /dev/null
+++ b/src/img/chevrons-up-tabler.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   class="icon icon-tabler icon-tabler-chevrons-up"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   stroke-width="2"
+   stroke="currentColor"
+   fill="none"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="chevrons-up-tabler.svg"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs12" />
+  <sodipodi:namedview
+     id="namedview10"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="37.125"
+     inkscape:cx="12"
+     inkscape:cy="12.013468"
+     inkscape:window-width="1920"
+     inkscape:window-height="1053"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg8" />
+  <path
+     stroke="none"
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <polyline
+     points="7 11 12 6 17 11"
+     id="polyline4"
+     style="stroke:#ffeede" />
+  <polyline
+     points="7 17 12 12 17 17"
+     id="polyline6"
+     style="stroke:#ffeede" />
+</svg>
diff --git a/src/regarding-js.md b/src/regarding-js.md
index e21de62..8253fd4 100644
--- a/src/regarding-js.md
+++ b/src/regarding-js.md
@@ -12,4 +12,6 @@ To keep everything transparent, all pages on [Web Apps]() will require JavaScrip
 
 |Description|GitLab source|Website source|
 |---|---|---|
-|Click to zoom on images|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/image-show.js)|[Link](/scripts/image-show.js) 
+|Click to zoom on images|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/image-show.js)|[Link](/scripts/image-show.js)|
+|Automatically appearing button to scroll to top|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/back-to-top.js)|[Link](/scripts/back-to-top.js)|
+
diff --git a/src/scripts/back-to-top.js b/src/scripts/back-to-top.js
new file mode 100644
index 0000000..be1a1c3
--- /dev/null
+++ b/src/scripts/back-to-top.js
@@ -0,0 +1,10 @@
+const scrollBtn = document.getElementById('scrollBtn');
+
+window.onscroll = function() {
+	if (window.scrollY >= 800) {
+		scrollBtn.style.display = 'block';
+	} else {
+		scrollBtn.style.display = 'none';
+	}
+}
+
diff --git a/src/scripts/image-show.js b/src/scripts/image-show.js
index b1ca7cf..961242e 100644
--- a/src/scripts/image-show.js
+++ b/src/scripts/image-show.js
@@ -18,7 +18,7 @@ function clickToView() {
 const images = document.getElementsByTagName('img');
 
 for (const image of images) {
-	if (image.alt !== '🔗') {
+	if (image.alt !== '🔗' && image.id !== 'scrollBtn') {
 		image.onclick = clickToView;
 	}
 }
diff --git a/src/styles.css b/src/styles.css
index 7024177..ff120e8 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -373,12 +373,28 @@ code span {
   left: 0;
   top: 0;
   padding: 1em;
+  z-index: 2;
 }
 
 .body-on-clicked-image {
   overflow: hidden;
 }
 
+.btnBackToTop {
+  font-size: 1rem;
+  position: fixed;
+  right: 1em;
+  bottom: 1em;
+  z-index: 1;
+  border: 1px solid;
+  transition-duration: 0.5s;
+  padding: 0.3em;
+}
+
+.btnBackToTop:hover {
+  cursor: pointer;
+}
+
 /* OpenSans font */
 
 @font-face {