diff --git a/ui/src/common/ScrollUpButton.tsx b/ui/src/common/ScrollUpButton.tsx
index 8368fbd..e030262 100644
--- a/ui/src/common/ScrollUpButton.tsx
+++ b/ui/src/common/ScrollUpButton.tsx
@@ -3,11 +3,39 @@ import KeyboardArrowUp from '@material-ui/icons/KeyboardArrowUp';
 import React, {Component} from 'react';
 
 class ScrollUpButton extends Component {
+    state = {
+        display: 'none',
+        opacity: 0,
+    };
+    componentDidMount() {
+        window.addEventListener('scroll', this.scrollHandler);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('scroll', this.scrollHandler);
+    }
+
+    scrollHandler = () => {
+        const currentScrollPos = window.pageYOffset;
+        const opacity = Math.min(currentScrollPos / 500, 1);
+        const nextState = {display: currentScrollPos > 0 ? 'inherit' : 'none', opacity};
+        if (this.state.display !== nextState.display || this.state.opacity !== nextState.opacity) {
+            this.setState(nextState);
+        }
+    };
+
     public render() {
         return (
             <Fab
                 color="primary"
-                style={{position: 'fixed', bottom: '30px', right: '30px', zIndex: 100000}}
+                style={{
+                    position: 'fixed',
+                    bottom: '30px',
+                    right: '30px',
+                    zIndex: 100000,
+                    display: this.state.display,
+                    opacity: this.state.opacity,
+                }}
                 onClick={this.scrollUp}>
                 <KeyboardArrowUp />
             </Fab>
diff --git a/ui/src/layout/Navigation.tsx b/ui/src/layout/Navigation.tsx
index d83159d..3dc2497 100644
--- a/ui/src/layout/Navigation.tsx
+++ b/ui/src/layout/Navigation.tsx
@@ -12,7 +12,10 @@ import {Button, Hidden, IconButton, Typography} from '@material-ui/core';
 import {DrawerProps} from '@material-ui/core/Drawer/Drawer';
 import CloseIcon from '@material-ui/icons/Close';
 
-const styles = (theme: Theme): StyleRules<'drawerPaper' | 'toolbar' | 'link'> => ({
+const styles = (theme: Theme): StyleRules<'root' | 'drawerPaper' | 'toolbar' | 'link'> => ({
+    root: {
+        height: '100%',
+    },
     drawerPaper: {
         position: 'relative',
         width: 250,
@@ -26,7 +29,7 @@ const styles = (theme: Theme): StyleRules<'drawerPaper' | 'toolbar' | 'link'> =>
     },
 });
 
-type Styles = WithStyles<'drawerPaper' | 'toolbar' | 'link'>;
+type Styles = WithStyles<'root' | 'drawerPaper' | 'toolbar' | 'link'>;
 
 interface IProps {
     loggedIn: boolean;
@@ -74,7 +77,7 @@ class Navigation extends Component<
 
         return (
             <ResponsiveDrawer
-                classes={{paper: classes.drawerPaper}}
+                classes={{root: classes.root, paper: classes.drawerPaper}}
                 navOpen={navOpen}
                 setNavOpen={setNavOpen}
                 id="message-navigation">