Merge pull request #597 from edx/feature/msteele/scrollup

Add scroll-to-top when switching verticals from bottom nav buttons.

common/lib/xmodule/xmodule/js/spec/sequence/display_spec.coffee

@@ -134,6 +134,7 @@ xdescribe 'Sequence', ->
     beforeEach ->
       jasmine.stubRequests()
       @sequence = new Sequence '1', 'sequence_1', @items, 'sequence', 2
+      $.scrollTo 150
       $('.sequence-nav-buttons .next a').click()
 
     it 'log the next sequence event', ->
@@ -142,10 +143,14 @@ xdescribe 'Sequence', ->
     it 'call render on the next sequence', ->
       expect($('#seq_content').html()).toEqual 'Sample Problem'
 
+    it 'scrolls to the top of the page', ->
+      expect($('body').scrollTop()).toBe 0
+
   describe 'previous', ->
     beforeEach ->
       jasmine.stubRequests()
       @sequence = new Sequence '1', 'sequence_1', @items, 'sequence', 2
+      $.scrollTo 150
       $('.sequence-nav-buttons .prev a').click()
 
     it 'log the previous sequence event', ->
@@ -154,6 +159,9 @@ xdescribe 'Sequence', ->
     it 'call render on the previous sequence', ->
       expect($('#seq_content').html()).toEqual 'Video 1'
 
+    it 'scrolls to the top of the page', ->
+      expect($('body').scrollTop()).toBe 0
+
   describe 'link_for', ->
     it 'return a link for specific position', ->
       sequence = new Sequence '1', 'sequence_1', @items, 2

common/lib/xmodule/xmodule/js/src/sequence/display.coffee

@@ -132,34 +132,38 @@ class @Sequence
     else
       alert 'Sequence error! Cannot navigate to tab ' + new_position + 'in the current SequenceModule. Please contact the course staff.'
 
-  next: (event) =>
-    event.preventDefault()
-    new_position = @position + 1
-    Logger.log "seq_next", old: @position, new: new_position, id: @id
-
-    analytics.pageview @id
-
-    # navigation using the next arrow
-    analytics.track "Accessed Next Sequential",
-      sequence_id: @id
-      current_sequential: @position
-      target_sequential: new_position
+  next: (event) => @_change_sequential 'seq_next', event
+  previous: (event) => @_change_sequential 'seq_prev', event
 
-    @render new_position
+  # `direction` can be 'seq_prev' or 'seq_next'
+  _change_sequential: (direction, event) =>
+    # silently abort if direction is invalid.
+    return unless direction in ['seq_prev', 'seq_next']
 
-  previous: (event) =>
     event.preventDefault()
-    new_position = @position - 1
-    Logger.log "seq_prev", old: @position, new: new_position, id: @id
+    offset =
+      seq_next: 1
+      seq_prev: -1
+    new_position = @position + offset[direction]
+    Logger.log direction,
+      old: @position
+      new: new_position
+      id: @id
 
     analytics.pageview @id
 
-    # navigation using the previous arrow
-    analytics.track "Accessed Previous Sequential",
+    # navigation using the next or previous arrow button.
+    tracking_messages =
+      seq_prev: "Accessed Previous Sequential"
+      seq_next: "Accessed Next Sequential"
+    analytics.track tracking_messages[direction],
       sequence_id: @id
       current_sequential: @position
       target_sequential: new_position
 
+    # If the bottom nav is used, scroll to the top of the page on change.
+    if $(event.target).closest('nav[class="sequence-bottom"]').length > 0
+      $.scrollTo 0, 150
     @render new_position
 
   link_for: (position) ->