Make scroll-up function only apply on devices > 1024px

ideal-postcodes · Apr 16, 2018 · 71230e6 · 71230e6
1 parent 3828fd1
commit 71230e6
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 24 deletions.
diff --git a/app/views/includes/arrow.ejs b/app/views/includes/arrow.ejs
@@ -1 +1,7 @@
-<a href="#top"><div class="arrow-up"></div></a>
+<div class="container">
+	<div class="row">
+		<div class="col-lg-offset-10 col-lg-2">
+			<a href="#top"><div class="arrow-up"></div></a>
+		</div>
+	</div>
+</div>
diff --git a/public/css/app.css b/public/css/app.css
@@ -366,7 +366,7 @@ li.active a {
 }
 
 .arrow-up {
-  border: solid #080F1F;
+  border: solid #28502e;
   border-width: 0 3px 3px 0;
   display: none;
   height: 1em;
@@ -376,14 +376,14 @@ li.active a {
   right: 8%;
   transform: rotate(-135deg);
   -webkit-transform: rotate(-135deg);
-  -webkit-animation: toTop ease-in-out 1s 3 alternate;
-  -moz-animation: toTop ease-in-out 1s 3 alternate;
-  animation: toTop ease-in-out 1s 3 alternate;
+  -webkit-animation: toTop ease-in-out 1s 1 alternate;
+  -moz-animation: toTop ease-in-out 1s 1 alternate;
+  animation: toTop ease-in-out 1s 1 alternate;
   z-index: 100;
 }
 
 .arrow-up::after {
-  border: solid #080F1F;
+  border: solid #28502e;
   border-width: 0 3px 3px 0;
   content: "";
   display: block;
@@ -398,34 +398,52 @@ li.active a {
   from {
     opacity: 0;
   }
+  50% {
+    opacity: 1;
+    -moz-transform: translateY(0.5em) rotate(-135deg);
+    -webkit-transform: translateY(0.5em) rotate(-135deg);
+    transform: translateY(0.5em) rotate(-135deg);
+  }
   to {
     opacity: 1;
-    -moz-transform: translateY(1em) rotate(-135deg);
-    -webkit-transform: translateY(1em) rotate(-135deg);
-    transform: translateY(1em) rotate(-135deg);
+    -moz-transform: translateY(0em) rotate(-135deg);
+    -webkit-transform: translateY(0em) rotate(-135deg);
+    transform: translateY(0em) rotate(-135deg);
   }
 }
 
 @-webkit-keyframes toTop {
   from {
     opacity: 0;
   }
+  50% {
+    opacity: 1;
+    -moz-transform: translateY(0.5em) rotate(-135deg);
+    -webkit-transform: translateY(0.5em) rotate(-135deg);
+    transform: translateY(0.5em) rotate(-135deg);
+  }
   to {
     opacity: 1;
-    -moz-transform: translateY(1em) rotate(-135deg);
-    -webkit-transform: translateY(1em) rotate(-135deg);
-    transform: translateY(1em) rotate(-135deg);
+    -moz-transform: translateY(0em) rotate(-135deg);
+    -webkit-transform: translateY(0em) rotate(-135deg);
+    transform: translateY(0em) rotate(-135deg);
   }
 }
 
 @-webkit-keyframes toTop {
   from {
     opacity: 0;
   }
+  50% {
+    opacity: 1;
+    -moz-transform: translateY(0.5em) rotate(-135deg);
+    -webkit-transform: translateY(0.5em) rotate(-135deg);
+    transform: translateY(0.5em) rotate(-135deg);
+  }
   to {
     opacity: 1;
-    -moz-transform: translateY(1em) rotate(-135deg);
-    -webkit-transform: translateY(1em) rotate(-135deg);
-    transform: translateY(1em) rotate(-135deg);
+    -moz-transform: translateY(0em) rotate(-135deg);
+    -webkit-transform: translateY(0em) rotate(-135deg);
+    transform: translateY(0em) rotate(-135deg);
   }
 }
diff --git a/public/js/app.js b/public/js/app.js
@@ -227,27 +227,20 @@ $( document ).ready(function() {
 		});
 	});
 
-	// if($("body", "html").scrollTop() > 0) {
-	// }
-	// $(window).scroll(function() {
-	// });
-
 	let offset = 250;
 	let duration = 300;
 
 	$(window).scroll(function() {
-		if ($(this).scrollTop() > offset) {
+			if ($(this).scrollTop() > offset && $(this).width() > 1024) {
 			$('.arrow-up').fadeIn(duration);
 		} else {
 			$('.arrow-up').fadeOut(duration);
 		}
 	});
-
+	
 	$('.arrow-up').click(function(event) {
 		event.preventDefault();
 		$('html, body').animate({scrollTop: 0}, duration);
 		return false;
 	})
-
-
 });