Affix the build scroll controls

app/assets/javascripts/ci_build.js.coffee

+class @CiBuild
+  constructor: ->
+    @initScrollButtonAffix()
+
+  initScrollButtonAffix: ->
+    buildScroll = $('#js-build-scroll')
+    body = $('body')
+    buildTrace = $('#build-trace')
+
+    buildScroll.affix(
+      offset:
+        bottom: ->
+          body.outerHeight() - (buildTrace.outerHeight() + buildTrace.offset().top)
+    )

app/assets/javascripts/dispatcher.js.coffee

@@ -103,6 +103,8 @@ class Dispatcher
         new ProjectFork()
       when 'projects:artifacts:browse'
         new BuildArtifacts()
+      when 'projects:builds:show'
+        new CiBuild()
 
     switch path.first()
       when 'admin'

app/assets/stylesheets/pages/builds.scss

@@ -27,10 +27,25 @@
   }
 
   .scroll-controls {
-    position: fixed;
-    bottom: 10px;
-    left: 250px;
-    z-index: 100;
+    &.affix-top {
+      position: absolute;
+      top: 10px;
+      right: 25px;
+    }
+
+    &.affix-bottom {
+      position: absolute;
+      right: 25px;
+    }
+
+    &.affix {
+      right: 30px;
+      bottom: 15px;
+
+      @media (min-width: $screen-md-min) {
+        right: 26%;
+      }
+    }
 
     a {
       display: block;

app/views/projects/builds/show.html.haml

@@ -70,7 +70,7 @@
           .autoscroll-container
             %button.btn.btn-success.btn-sm#autoscroll-button{:type => "button", :data => {:state => 'disabled'}} enable autoscroll
           .clearfix
-      .scroll-controls
+      #js-build-scroll.scroll-controls
         = link_to '#up-build-trace', class: 'btn' do
           %i.fa.fa-angle-up
         = link_to '#down-build-trace', class: 'btn' do