From 7539e882eeb7f2f73366053b48dd7c25814f4678 Mon Sep 17 00:00:00 2001
From: Learning-Repo1 <technolster02@gmail.com>
Date: Thu, 27 Jul 2023 22:55:53 +0530
Subject: [PATCH] adding scroll to top button

---
 app/components/button/scrollbutton.html |  3 +++
 app/components/button/scrollbutton.js   | 30 +++++++++++++++++++++++++
 app/components/button/scrollbutton.scss | 25 +++++++++++++++++++++
 app/pages/main/main.js                  |  5 +++--
 app/pages/main/main.scss                | 12 ++++++++++
 app/pages/main/mainView.html            |  1 +
 6 files changed, 74 insertions(+), 2 deletions(-)
 create mode 100644 app/components/button/scrollbutton.html
 create mode 100644 app/components/button/scrollbutton.js
 create mode 100644 app/components/button/scrollbutton.scss

diff --git a/app/components/button/scrollbutton.html b/app/components/button/scrollbutton.html
new file mode 100644
index 00000000..108cf9b7
--- /dev/null
+++ b/app/components/button/scrollbutton.html
@@ -0,0 +1,3 @@
+<div class="scroll-button-container" ng-show="isButtonVisible" ng-click="scrollToTop()">
+   <span class="scroll-button" ><i class="fas fa-arrow-circle-up"></i></span>
+</div>
\ No newline at end of file
diff --git a/app/components/button/scrollbutton.js b/app/components/button/scrollbutton.js
new file mode 100644
index 00000000..060d444e
--- /dev/null
+++ b/app/components/button/scrollbutton.js
@@ -0,0 +1,30 @@
+import angular  from 'angular';
+
+import "./scrollbutton.scss"
+
+export default angular.module("rhGitHub.scrollbutton", []).component("scrollbutton", {
+    template: require("./scrollbutton.html"),
+    controller: "scrollCtrl"
+}).controller("scrollCtrl", ["$scope", function($scope) {
+ 
+   $scope.isButtonVisible = false;
+
+    // Function to update the button visibility based on the scroll position
+    const updateButtonVisibility = () => {
+      $scope.isButtonVisible = window.scrollY > 500;
+      $scope.$apply(); // Manually trigger a digest cycle to update the view
+    };
+
+    // Attach the scroll event listener to update the button visibility
+    angular.element(window).on("scroll", updateButtonVisibility);
+
+    $scope.scrollToTop = () => {
+      window.scrollTo({ top: 0, behavior: "smooth" }); // Smooth scroll to the top
+    };
+
+    // Clean up the event listener when the controller is destroyed
+    $scope.$on("$destroy", () => {
+      angular.element(window).off("scroll", updateButtonVisibility);
+    });
+    }]);
+
diff --git a/app/components/button/scrollbutton.scss b/app/components/button/scrollbutton.scss
new file mode 100644
index 00000000..e85e0be4
--- /dev/null
+++ b/app/components/button/scrollbutton.scss
@@ -0,0 +1,25 @@
+
+
+.scroll-button-container {
+  background-color: #007bff;
+  color: #fff;
+  padding: 10px 10px;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+}
+.scroll-button{
+  background: none;
+  border: none;
+  cursor: pointer;
+&:hover {
+  background-color: none;
+}
+}
+
diff --git a/app/pages/main/main.js b/app/pages/main/main.js
index c5042615..ce6952d0 100644
--- a/app/pages/main/main.js
+++ b/app/pages/main/main.js
@@ -23,7 +23,7 @@ import bandheader from "../../components/bandheader/bandheader";
 import card from "../../components/card/card";
 import group from "../../components/group/group";
 import dynamictable from "../../components/dynamictable/dynamictable";
-
+import scrollbutton from "../../components/button/scrollbutton";
 export default angular.module("rhGitHub.main", [
     "ngRoute",
     "rhGitHub.hero",
@@ -31,7 +31,8 @@ export default angular.module("rhGitHub.main", [
     "rhGitHub.bandheader",
     "rhGitHub.card",
     "rhGitHub.group",
-    "rhGitHub.dynamictable"
+  "rhGitHub.dynamictable",
+    "rhGitHub.scrollbutton"
   ])
   .config(["$routeProvider", ($routeProvider) => {
     $routeProvider.when("/main", {
diff --git a/app/pages/main/main.scss b/app/pages/main/main.scss
index 04b8531a..d1ba832c 100644
--- a/app/pages/main/main.scss
+++ b/app/pages/main/main.scss
@@ -33,3 +33,15 @@
     }
   }
 }
+
+.scroll{
+  
+  position: fixed;
+  bottom: 80px;
+  right: 20px;
+  z-index: 5;
+  place-items: center;
+  border-radius: 50%; 
+  cursor: pointer;
+ 
+}
\ No newline at end of file
diff --git a/app/pages/main/mainView.html b/app/pages/main/mainView.html
index d5c1c250..ef7eb241 100644
--- a/app/pages/main/mainView.html
+++ b/app/pages/main/mainView.html
@@ -15,5 +15,6 @@
       <div class="band-container" data-layout="2-up">
         <group ng-repeat="item in ctrl.content" item="item"></group>
       </div>
+      <scrollbutton class="scroll"></scrollbutton>
     </section>
 </main>