diff --git a/src/newsreader/js/pages/homepage/components/ScrollTop.js b/src/newsreader/js/pages/homepage/components/ScrollTop.js
index 83fdb43..24228b1 100644
--- a/src/newsreader/js/pages/homepage/components/ScrollTop.js
+++ b/src/newsreader/js/pages/homepage/components/ScrollTop.js
@@ -1,24 +1,40 @@
 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) {
+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">
-        <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)}
-        />
+        {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>
     );
   }
-
-  return null;
-};
-
-export default scrollTop;
+}