Added a scroll to top component (#188)

* Added a scroll to top component

* Fixed mobile view bug

Author: JanviMahajan14

src/components/ScrollToTopBtn/ScrollToTopBtn.css

@@ -0,0 +1,8 @@
+.scroll-to-top {
+    position: fixed;
+    bottom: 0.5rem;
+    right: 0.5rem;
+    animation: fadeIn 700ms ease-in-out 1s both;
+    cursor: pointer;
+    z-index:999;
+  }

src/components/ScrollToTopBtn/ScrollToTopBtn.js

@@ -0,0 +1,55 @@
+import React, { Component } from "react";
+import './ScrollToTopBtn.css';
+
+class ScrollToTopBtn extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            is_visible: false
+        };
+    }
+
+    componentDidMount() {
+        var scrollComponent = this;
+        document.addEventListener("scroll", function (e) {
+            scrollComponent.toggleVisibility();
+        });
+    }
+
+    toggleVisibility() {
+        if (window.pageYOffset > 50) {
+            this.setState({
+                is_visible: true
+            });
+        } else {
+            this.setState({
+                is_visible: false
+            });
+        }
+    }
+
+    scrollToTop() {
+        window.scrollTo({
+            top: 0,
+            behavior: "smooth"
+        });
+    }
+
+    render() {
+        const { is_visible } = this.state;
+        return (
+            <div className="scroll-to-top">
+                {is_visible && (
+                    <div onClick={() => this.scrollToTop()}>
+                        <span class="fa-stack fa-lg">
+                            <i class="fa fa-circle fa-stack-2x"></i>
+                            <i class="fa fa-arrow-up fa-stack-1x fa-inverse" aria-hidden="true"></i>
+                        </span>
+                    </div>
+                )}
+            </div>
+        );
+    }
+}
+
+export default ScrollToTopBtn;

src/pages/About/About.js

@@ -5,6 +5,7 @@ import Markdown from 'react-markdown';
 import './About.css'
 import marked from "marked";
 import codeuino from './codeuino-banner.jpg'
+import ScrollToTopBtn from '../../components/ScrollToTopBtn/ScrollToTopBtn.js';
 class Blog extends Component {
     constructor(props){
         super(props);
@@ -57,6 +58,7 @@ class Blog extends Component {
             </div>
             </div>
             </div>
+            <ScrollToTopBtn />
             </div>
         );
     }

src/pages/Home/NewHome.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import './NewHome.css';
-
+import ScrollToTopBtn from '../../components/ScrollToTopBtn/ScrollToTopBtn.js';
 import Projects from './Components/Projects'
 import LandingPageComponent from './Components/LandingPageComponent'
 import Activities from './Components/Activities'
@@ -15,6 +15,7 @@ const NewHome = () => {
 				<Projects/>
 				<Activities/>
 				<Partners/>
+				<ScrollToTopBtn />
 		</div>
 	</div>
         </div>

src/pages/Team/Team.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import './Team.css';
 import BoardMembersWrapper from './BoardMembers'
 import CoreContributorsWrapper from './CoreContributors'
+import ScrollToTopBtn from '../../components/ScrollToTopBtn/ScrollToTopBtn.js';
 import axios from 'axios';
 import $ from 'jquery';
 class Team extends Component {
@@ -63,6 +64,7 @@ class Team extends Component {
     </div>
     </div>
     </div>
+    <ScrollToTopBtn />
             </>
         );
     }