Google Closure equivalent to jQuery $('html,body').animate({scrollTop: 800});

Question

The code in question animates a page scroll to a particular point on the page. As the title says, I want the Google Closure equivalent to the following jQuery:

$('html,body').animate({scrollTop: 800});

It says here that html, body allows for browser inconsistencies, and that $(document) is equivalent.

I have tried the following:

var anim = new goog.fx.dom.Scroll(document, [0, 0], [0, 800], 400);
anim.play();

I've also tried with document.body.

There are no demos and a dismal lack of information on goog.fx.dom.Scroll on the web.

i'd assume based on the api you would need to call it twice, once with `document.body` and again with `document.querySelector("html")` but i've never used that library. — Kevin B, Apr 04 '14 at 21:23
For the record, I ended up going Vanilla by using a modified, hard-coded, de-jQueried version of the jQuery smooth-scroll plugin by Chris Ferdinandi. — Nick, Jun 16 '14 at 08:33

wilsotobianco · Answer 1 · 2016-09-20T21:24:11.287

The way to make this goog.fx.Scroll class work with the document (body or HTML) work is by passing the document scroll element this way:

/**
 * Document scroll element obtained from goog.dom
 * @type {Element}
 * @private
 */
let documentScrollElement_ = goog.dom.getDocumentScrollElement()

/**
 * Function triggered by any target to start scrolling
 * @param  {Event} e Triggered event
 * @private
 */
function scrollTrigger_(e) {
  let googScroll = new goog.fx.dom.Scroll(
    this.documentScrollElement_,
    [0, 0],
    [0, 800],
    400);

  googScroll.play();
}

Just so you know the Scroll class has this optional parameter to add easing to the scroll. You should new the class like this:

let googScroll = new goog.fx.dom.Scroll(
    this.documentScrollElement_,
    [0, 0],
    [0, 800],
    400,
    goog.fx.easing.inAndOut(t)); // Note that you need to import or require the goog.fx.easing object

I know this is an old question but I ran into this same problem and managed to make it work so I thought it was worth it to answer this.

Hope it helps!

score 3 · Answer 2 · edited Nov 10 '15 at 00:52

Looking at the source code this should work if you use document.body and you haven't done anything weird to the styling, but you will need to debug to find the issue.

Start by manually changing document.body.scrollTop, if that doesn't work this scroll animation won't be able to do anything about it.

Also, put a breakpoint in goog.fx.dom.Scroll.prototype.updateStyle and goog.fx.Animation.prototype.play and see if they fire and what happens.

Have fun.

Google Closure equivalent to jQuery $('html,body').animate({scrollTop: 800});

2 Answers2