Add scroll to top/bottom component

src/newsreader/js/pages/homepage/App.js

@@ -5,6 +5,7 @@ import { isEqual } from 'lodash';
 
 import { fetchCategories } from './actions/categories';
 
+import ScrollTop from './components/ScrollTop.js';
 import Sidebar from './components/sidebar/Sidebar.js';
 import PostList from './components/postlist/PostList.js';
 import PostModal from './components/PostModal.js';
@@ -41,6 +42,8 @@ class App extends React.Component {
           />
         )}
 
+        <ScrollTop />
+
         {this.props.error && (
           <Messages messages={[{ type: 'error', text: this.props.error.message }]} />
         )}

src/newsreader/js/pages/homepage/components/ScrollTop.js

@@ -0,0 +1,40 @@
+import React from 'react';
+
+export default class ScrollTop extends React.Component {
+  scrollListener = ::this.scrollListener;
+
+  state = { showTop: false, showBottom: false };
+
+  componentDidMount() {
+    window.addEventListener('scroll', this.scrollListener);
+  }
+
+  scrollListener() {
+    const showBottom = window.innerHeight + window.scrollY < document.body.offsetHeight;
+
+    this.setState({
+      showTop: window.pageYOffset > 0 ? true : false,
+      showBottom: showBottom,
+    });
+  }
+
+  render() {
+    return (
+      <div className="scroll-to-top">
+        {this.state.showTop && (
+          <i
+            className="scroll-to-top__icon scroll-to-top__icon--top"
+            onClick={() => window.scrollTo(0, 0)}
+          />
+        )}
+
+        {this.state.showBottom && (
+          <i
+            className="scroll-to-top__icon scroll-to-top__icon--bottom"
+            onClick={() => window.scrollTo(0, document.body.scrollHeight)}
+          />
+        )}
+      </div>
+    );
+  }
+}

src/newsreader/scss/components/index.scss

@@ -26,3 +26,4 @@
 @import './post-message/index';
 @import './posts/index';
 @import './posts-info/index';
+@import './scroll-to-top/index';

src/newsreader/scss/components/modal/_post-modal.scss

@@ -5,4 +5,6 @@
   padding: 0;
 
   cursor: pointer;
+
+  z-index: 1000;
 }

src/newsreader/scss/components/scroll-to-top/_scroll-to-top.scss

@@ -0,0 +1,33 @@
+.scroll-to-top {
+  display: flex;
+  gap: 10px;
+
+  position: fixed;
+  right: 15%;
+  bottom: 0;
+
+  margin: 0 0 20px 0;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &__icon {
+    font-style: initial;
+    padding: 10px;
+
+    background-color: var(--lightest-accent-color);
+
+    &--top:before {
+      @include font-awesome;
+
+      content: "\f062";
+    }
+
+    &--bottom:before {
+      @include font-awesome;
+
+      content: "\f063";
+    }
+  }
+}

src/newsreader/scss/components/scroll-to-top/index.scss

@@ -0,0 +1 @@
+@import './scroll-to-top';