Initial commit

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,24 @@
+import React from 'react';
+
+// TODO show buttons when applicable
+// TODO caclulating height needs to take into account react renders later?
+const scrollTop = () => {
+  if (document.body.clientHeight < document.documentElement.clientHeight) {
+    return (
+      <div className="scroll-to-top">
+        <i
+          className="scroll-to-top__icon scroll-to-top__icon--top"
+          onClick={() => window.scrollTo(0, 0)}
+        />
+        <i
+          className="scroll-to-top__icon scroll-to-top__icon--bottom"
+          onClick={() => window.scrollTo(0, document.body.scrollHeight)}
+        />
+      </div>
+    );
+  }
+
+  return null;
+};
+
+export default scrollTop;

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/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';