src/service/viewport-impl.js
/**
   * Scrolls element into view much like Element. scrollIntoView does but
   * in the AMP/Viewer environment. Adds animation for the sccrollIntoView
   * transition.
   *
   * @param {!Element} element
   * @param {number=} duration
   * @param {string=} curve
   * @param {string=} pos (takes one of 'top', 'bottom', 'center')
   * @return {!Promise}
   */
Scrolls element into view much like Element. scrollIntoView does but
in the AMP/Viewer environment. Adds animation for the sccrollIntoView
transition.


Scrolls element into view much like Element . scrollIntoView does but in the AMP / Viewer environment . Adds animation for the sccrollIntoView transition .
animateScrollIntoView(element,
                        duration = 500,
                        curve = 'ease-in',
                        pos = 'top') {
    const elementRect = this.binding_.getLayoutRect(element);
    let offset;
    switch (pos) {
      case 'bottom':
        offset = -this.getHeight() + elementRect.height;
        break;
      case 'center':
        offset = -this.getHeight() / 2 + elementRect.height / 2;
        break;
      default:
        offset = 0;
        break;
    }
    const calculatedScrollTop = elementRect.top - this.paddingTop_ + offset;
    const newScrollTop = Math.max(0, calculatedScrollTop);
    const curScrollTop = this.getScrollTop();
    if (newScrollTop == curScrollTop) {
      return Promise.resolve();
    }
    const interpolate = numeric(curScrollTop, newScrollTop);
    return Animation.animate(this.ampdoc.getRootNode(), position => {
      this.binding_.setScrollTop(interpolate(position));
    }, duration, curve).then();
  }
animateScrollIntoView ( element , duration = 500 , curve = 'ease-in' , pos = 'top' ) { const elementRect = this . binding_ . getLayoutRect ( element ) ; let offset ; switch ( pos ) { case 'bottom' : offset = - this . getHeight ( ) + elementRect . height ; break ; case 'center' : offset = - this . getHeight ( ) / 2 + elementRect . height / 2 ; break ; default : offset = 0 ; break ; } const calculatedScrollTop = elementRect . top - this . paddingTop_ + offset ; const newScrollTop = Math . max ( 0 , calculatedScrollTop ) ; const curScrollTop = this . getScrollTop ( ) ; if ( newScrollTop == curScrollTop ) { return Promise . resolve ( ) ; } const interpolate = numeric ( curScrollTop , newScrollTop ) ; return Animation . animate ( this . ampdoc . getRootNode ( ) , position => { this . binding_ . setScrollTop ( interpolate ( position ) ) ; } , duration , curve ) . then ( ) ; }
Scrolls element into view much like Element.
Scrolls element into view much like Element .
/** @const {!TransitionDef<number>} */ // TODO(aghassemi, #10463): the duration should not be a constant and should // be proportional to the distance to be scrolled for better transition // experience when things are closer vs farther.