actually scrolling to footnotes

2 files changed, 9 insertions, 2 deletions

diff --git a/animism-align/frontend/app/views/viewer/sections/footnotes.css b/animism-align/frontend/app/views/viewer/sections/footnotes.css
index 3c2d5b8..74426c3 100644
--- a/animism-align/frontend/app/views/viewer/sections/footnotes.css
+++ b/animism-align/frontend/app/views/viewer/sections/footnotes.css
@@ -50,6 +50,7 @@
   stroke: white;
 }
 .nav-footnotes-scroll {
+  position: relative;
   min-height: 10rem;
   max-height: calc(50vh - 5rem);
   max-width: 100%;
@@ -94,6 +95,9 @@
   bottom: 0;
   left: 0;
 }
+.nav-footnotes .note-spacer {
+  height: 10vh;
+}
 .viewer-nav .nav-footnotes .nav-return .arrow polygon {
   fill: #fff;
 }
diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js
index fa5142f..1582d82 100644
--- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js
@@ -14,6 +14,9 @@ class ViewerSectionsFootnotes extends Component {
     super(props)
     this.scrollRef = React.createRef()
   }
+  componentDidMount() {
+    this.cacheScrollPositions()
+  }
   componentDidUpdate(prevProps) {
     if (this.props.footnoteList !== prevProps.footnoteList) {
       this.cacheScrollPositions()
@@ -30,8 +33,7 @@ class ViewerSectionsFootnotes extends Component {
   }
   scrollToFootnote() {
     const { currentFootnote } = this.props
-    const id = currentFootnote - 1
-    const pos = this.state.scrollPositions[id]
+    const pos = this.state.scrollPositions[currentFootnote - 1]
     this.scrollRef.current.scrollTo(0, pos - 5)
   }
   render() {
@@ -55,6 +57,7 @@ class ViewerSectionsFootnotes extends Component {
               </div>
             </div>
           ))}
+          <div className='note-spacer' />
         </div>
         <div className='nav-footnotes-gradient' />
         <FootnotesLink type='down' />