adding scroll to top button

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>

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);
+    });
+    }]);
+

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;
+}
+}
+

app/pages/main/main.js

@@ -23,15 +23,16 @@ 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",
     "rhGitHub.band",
     "rhGitHub.bandheader",
     "rhGitHub.card",
     "rhGitHub.group",
-    "rhGitHub.dynamictable"
+  "rhGitHub.dynamictable",
+    "rhGitHub.scrollbutton"
   ])
   .config(["$routeProvider", ($routeProvider) => {
     $routeProvider.when("/main", {

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;
+
+}

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>