scroll to top when section changes

1 files changed, 11 insertions, 1 deletions

diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.js b/animism-align/frontend/app/views/viewer/player/player.transcript.js
index a491a88..17218d5 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.js
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.js
@@ -14,6 +14,16 @@ class PlayerTranscript extends Component {
     this.handleClose = this.handleClose.bind(this)
     this.handleAnnotationClick = this.handleAnnotationClick.bind(this)
     this.handleParagraphDoubleClick = this.handleParagraphDoubleClick.bind(this)
+    this.containerRef = React.createRef()
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.section !== prevProps.section) {
+      this.containerRef.current.scrollTo(0, 0)
+      setTimeout(() => {
+        this.containerRef.current.scrollTo(0, 0)
+      }, 20)
+    }
   }
 
   handleAnnotationClick(e, paragraph, annotation) {
@@ -30,7 +40,7 @@ class PlayerTranscript extends Component {
   render() {
     const { paragraphs } = this.props.section
     return (
-      <div className="player-transcript">
+      <div className="player-transcript" ref={this.containerRef}>
         <div className='content'>
           <ParagraphList
             paragraphs={paragraphs}