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

There's a jQuery plugin exactly for that

Here's the link to a blog post of mine that describes the whole thing and has link to GitHub project where you can get the plugin.

Animated scrollintoview() jQuery plugin.

Answer 2

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

Answer 3

I was searching this issue too and found this solution:

$('html, body').animate({
    scrollTop: $("#elementId").offset().top
}, 1000);

resource: http://www.abeautifulsite.net/smoothly-scroll-to-an-element-without-a-jquery-plugin-2/

Answer 4

Maybe you don't want to add jQuery just for implementing this feature. elem is the element to be scrolled. The destination pos can be taken from the offsetTop property of the element to be moved into view.

function Scroll_To(elem, pos)
{
    var y = elem.scrollTop;
    y += (pos - y) * 0.3;
    if (Math.abs(y-pos) < 2)
    {
        elem.scrollTop = pos;
        return;
    }
    elem.scrollTop = y;
    setTimeout(Scroll_To, 40, elem, pos);   
}

Answer 5

Smooth scrolling using requestAnimationFrame over a specific duration with no jQuery.

Demo: http://codepen.io/Shadeness/pen/XXyvKG?editors=0010

window.bringIntoView_started = 0;
window.bringIntoView_ends = 0;
window.bringIntoView_y = 0;
window.bringIntoView_tick = function() {
  var distanceLeft, dt, duration, t, travel;
  t = Date.now();
  if (t < window.bringIntoView_ends) {
    dt = t - window.bringIntoView_started;
    duration = window.bringIntoView_ends - window.bringIntoView_started;
    distanceLeft = window.bringIntoView_y - document.body.scrollTop;
      travel = distanceLeft * (dt / duration);
      document.body.scrollTop += travel;
      window.requestAnimationFrame(window.bringIntoView_tick);
  } else {
    document.body.scrollTop = window.bringIntoView_y;
  }
};
window.bringIntoView = function(e, duration) {
  window.bringIntoView_started = Date.now();
  window.bringIntoView_ends = window.bringIntoView_started + duration;
  window.bringIntoView_y = Math.min(document.body.scrollTop + e.getBoundingClientRect().top, document.body.scrollHeight - window.innerHeight);
  window.requestAnimationFrame(window.bringIntoView_tick);
};

Eg:

bringIntoView(document.querySelector('#bottom'), 400)

It should speed up as dt (deltaTime) gets bigger, and slows down as distanceLeft get's smaller. I considered breaking the loop if the user scrolled but meh. Global variables prevent the previous call from completely taking over, but doesn't cancel the previous recursive loop so it'll animate twice as fast.

Answer 6

You just need to include this polyfill and it works.

https://github.com/iamdustan/smoothscroll

<script src="js/smoothscroll.js"></script>

Or require it if you use npm.

require('smoothscroll-polyfill').polyfill();

Use native scrollIntoView Method.

document.getElementById('parallax-group-logo').scrollIntoView({
    block: "start",
    behavior: "smooth"
});

Answer 7

Try this:

function scroll_into_view_smooth(elem)
{   var FPS = 48; // frames per second
    var DURATION = 0.6; // sec
    var e = elem;
    var left = e.offsetLeft;
    var top = e.offsetTop;
    var width = e.offsetWidth;
    var height = e.offsetHeight;
    var body = document.body;
    var to_scroll = [];
    var p, offset;
    while ((p = e.offsetParent))
    {   var client_width = p.clientWidth;
        var client_height = p!=body ? p.clientHeight : Math.min(document.documentElement.clientHeight, window.innerHeight);
        if (client_width<p.scrollWidth-1 && ((offset=left-p.scrollLeft)<0 || (offset=left+width-p.scrollLeft-client_width)>0))
        {   to_scroll.push({elem: p, prop: 'scrollLeft', from: p.scrollLeft, offset: offset});
        }
        if (client_height<p.scrollHeight-1 && ((offset=top-p.scrollTop)<0 || (offset=top+height-p.scrollTop-client_height)>0))
        {   to_scroll.push({elem: p, prop: 'scrollTop', from: p.scrollTop, offset: offset});
        }
        e = p;
        left += e.offsetLeft;
        top += e.offsetTop;
    }
    var x = 0;
    function apply()
    {   x = Math.min(x+1/(DURATION * FPS), 1);
        for (var i=to_scroll.length-1; i>=0; i--)
        {   to_scroll[i].elem[to_scroll[i].prop] = to_scroll[i].from + to_scroll[i].offset*x*x;
        }
        if (x < 1)
        {   setTimeout(apply, 1000/FPS);
        }
    }
    apply();
}

Answer 8

Just to add to this in case it helps someone,

I was working on a PWA for iOS and Android and was using the scrollIntoView() method until I found out the scrollIntoViewOptions object was not supported by Safari and thus wouldn't smooth scroll or anything etc.

I was able to mimic the functionality of scrollIntoView, with smooth scroll & 'nearest' option, for iOS with plain JS...well, plain TypeScript...

Click handler or w/e:

const element = *elementToScrollIntoView*;
const scrollLayer = *layerToDoTheScrolling*

if (/iPad|iPhone|iPod/.test(navigator.userAgent) {
    let position;
    const top = element.offsetTop - scrollLayer.scrollTop;
    if (element.offsetTop < scrollLayer.scrollTop) {
            // top of element is above top of view - scroll to top of element
        position = element.offsetTop;
    } else if (element.scrollHeight + top < scrollLayer.offsetHeight) {
            // element is in view - don't need to scroll
        return;
    } else if (element.scrollHeight > scrollLayer.offsetHeight) {
            // element is bigger than view - scroll to top of element
        position = element.offsetTop;
    } else {
            // element partially cut-off - scroll remainder into view
        const difference = scrollLayer.offsetHeight - (element.scrollHeight + top);
        position = scrollLayer.scrollTop - difference;
    }
        // custom function for iOS
    scrollToElement(scrollLayer, position, 200);
} else {
        // just use native function for Android
    element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
}

Manual scroll function:

scrollToElement(scrollLayer, destination, duration) {
    if (duration <= 0) {
        return;
    }
    const difference = destination - scrollLayer.scrollTop;
    const perTick = (difference / duration) * 10;

    setTimeout(() => {
        scrollLayer.scrollTop = scrollLayer.scrollTop + perTick;
        if (scrollLayer.scrollTop === destination) {
            return;
        }
        scrollToElement(scrollLayer, destination, duration - 10);
    }, 10);
}

NOTE: The big nested if and calculations in the handler is just to find the 'nearest' position as I was trying to replicate that behaviour, but just using the scrollToElement function to animate scrolling to top (default behaviour with no Options object) you can use:

scrollToElement(scrollLayer, element.offsetTop, 200);