scrollintoview animation

Question

My code is at http://jsfiddle.net/mannagod/QT3v5/7/.

The JS is:

function delay() {     var INTENDED_MONTH = 7 //August     // INTENDED_MONTH is zero-relative     now = new Date().getDate(), rows = document.getElementById('scripture').rows;     if (new Date().getMonth() != INTENDED_MONTH) {         // need a value here less than 1,          // or the box for the first of the month will be in Red         now = 0.5     };     for (var i = 0, rl = rows.length; i < rl; i++) {         var cells = rows[i].childNodes;         for (j = 0, cl = cells.length; j < cl; j++) {             if (cells[j].nodeName == 'TD'   && cells[j].firstChild.nodeValue != ''   && cells[j].firstChild.nodeValue == now) {                 // 'ffff99' // '#ffd700' // TODAY - red                 rows[i].style.backgroundColor = 'red'                  rows[i].scrollIntoView();             }         }     } } 

I need to find a way to smooth the .scrollintoview(). Right now it 'jumps' to the highlighted row. I need it to smoothly transition to that row. It needs to be done dynamically in replacement of scrollintoview. Any ideas? Thanks.

Answer 1

In most modern browsers (Chrome and Firefox, but not Safari, UC, or IE) you can pass options in an object to .scrollIntoView().

Try this:

elm.scrollIntoView({ behavior: 'smooth', block: 'center' }) 

Other values are behavior: 'instant' or block: 'start' or block: 'end'. See https://developer.mozilla.org/en/docs/Web/API/Element/scrollIntoView