Replace scroll-into-view with scroll-to-element

The new choice is simpler. It does not deal with scrollable elements
below the window. On the other hand, this also makes it less liable
to choke on edge cases when scrolling the window would be just fine.

h/static/scripts/annotator/guest.coffee

 baseURI = require('base-url')()
-scrollIntoView = require('scroll-into-view')
+scrollToElement = require('scroll-to-element')
 
 Annotator = require('annotator')
 Annotator.Plugin.CrossFrame = require('./plugin/cross-frame')
@@ -120,8 +120,11 @@ module.exports = class Guest extends Annotator
     crossframe.on 'scrollToAnnotation', (tag) =>
       for anchor in @anchors when anchor.highlights?
         if anchor.annotation.$$tag is tag
-          scrollIntoView(anchor.highlights[0])
-          return
+          scrollToElement(anchor.highlights[0], {
+            ease: 'out-expo',
+            offset: window.innerHeight * -.2,
+            duration: 1000,
+          })
     crossframe.on 'getDocumentInfo', (cb) =>
       this.getDocumentInfo()
       .then((info) -> cb(null, info))

h/static/scripts/annotator/plugin/bucket-bar.coffee

 Annotator = require('annotator')
 $ = Annotator.$
 
-scrollIntoView = require('scroll-into-view')
+scrollToElement = require('scroll-to-element')
 
 highlighter = require('../highlighter')
 
@@ -33,7 +33,11 @@ scrollToClosest = (anchors, direction) ->
         acc
   , {}
 
-  scrollIntoView(next.highlights[0]);
+  scrollToElement(next.highlights[0], {
+    ease: 'out-expo',
+    offset: window.innerHeight * -.2,
+    duration: 1000,
+  })
 
 
 class Annotator.Plugin.BucketBar extends Annotator.Plugin

h/static/scripts/annotator/test/guest-test.coffee

@@ -4,15 +4,15 @@ anchoring = {}
 CrossFrame = sinon.stub()
 CrossFrame['@noCallThru'] = true
 
-scrollIntoView = sinon.stub()
-scrollIntoView['@noCallThru'] = true
+scrollToElement = sinon.stub()
+scrollToElement['@noCallThru'] = true
 
 proxyquire = require('proxyquire')
 Guest = proxyquire('../guest', {
   './highlighter': highlighter,
   './anchoring/html': anchoring,
   './plugin/cross-frame': CrossFrame,
-  'scroll-into-view': scrollIntoView,
+  'scroll-to-element': scrollToElement,
 })
 
 $ = require('jquery')
@@ -206,7 +206,7 @@ describe 'Guest', ->
     describe 'on "scrollToAnnotation" event', ->
 
       beforeEach ->
-        scrollIntoView.reset()
+        scrollToElement.reset()
 
       it 'scrolls to the anchor with the matching tag', ->
         highlight = $('<span></span>')
@@ -215,8 +215,8 @@ describe 'Guest', ->
           {annotation: {$$tag: 'tag1'}, highlights: highlight.toArray()}
         ]
         emitGuestEvent('scrollToAnnotation', 'tag1')
-        assert.called(scrollIntoView)
-        assert.calledWith(scrollIntoView, highlight[0])
+        assert.called(scrollToElement)
+        assert.calledWith(scrollToElement, highlight[0])
 
     describe 'on "getDocumentInfo" event', ->
       guest = null

package.json

@@ -38,7 +38,7 @@
     "ng-tags-input": "2.2.0",
     "node-iterator-shim": "^1.0.1",
     "node-uuid": "^1.4.3",
-    "scroll-into-view": "^1.2.0",
+    "scroll-to-element": "0.0.2",
     "showdown": "^1.2.1",
     "uglify-js": "^2.4.14",
     "unorm": "^1.3.3"