Scroll highlighted text in div

Question

I have made a transcript for video using frogaloop and trying to auto-scroll the text in the div when the class .highlight is added.

 function checkTime() {
      froogInstance.addEvent('playProgress', function(data) {
        var curTime = Math.floor(Number(data.seconds));
        if(events[curTime]) {
          $('.highlight').removeClass('highlight');
          events[curTime].addClass('highlight');
          $('span:time-span(.highlight):first');
        }
      });
    }
    jumpToClickedSentance(args);
    initTimes(args);
    return this;
  }

I have tried by adding $('span:time-span(.highlight):first');. However this doesn't work. The text is not scrolling.

I believe you are getting the `` where you want to move the scrollbar in your `jumpToClickedSentance` function. once you have the target, then you can do something like this in javascript : `var val = $((this).offsetTop); $("#player_1_transcript").scrollTop(val.get());` `$(this)` should be your target to where you want to move the scrollbar — Ashu_90, May 22 '20 at 16:02
`var scroll = $(window).scrollTop();` `var val = $(('.highlight').offsetTop);` `$("#player_1_transcript").scrollTop(val.get());` This didn't work — SSSK, May 23 '20 at 03:24

score 0 · Answer 1 · answered May 23 '20 at 03:30

Thanks to: https://stackoverflow.com/a/24390378/1035130

I added this and its working

var $container = $("#player_1_transcript");
          var $scrollTo = $('.highlight');
          $container.animate({scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop(), scrollLeft: 0},300);

Scroll highlighted text in div

1 Answers1