Portal Widget - scrollIntoView behavior: smooth not working in Rome

[ryan_pope]

I have a widget on my portal homepage that redirects to a section further down the page. The Client controller function utilizes scrollIntoView, with an object attribute containing behavior: 'smooth'. Prior to Rome, this worked as expected and scrolled smoothly to the section being redirected to. After Rome, this capability no longer works, with no error messages and the screen just remains where it is. If I remove the behavior:'smooth' object, it does navigate to the appropriate section, but it's instantaneous, and just doesn't feel right. Has any one encountered this and/or know of a workaround to get the smooth scroll?

HTML Template: 

<div class="padding-lr-0 header-cards">
  <!-- Navigate to section of page -->
  <a ng-if="options.navigate_id" class="header-card" ng-click="c.scrollTo()">
    <div class="card-image-container">
      <div class="col-xs-12 header-card-icon"> 
        <img class="card-image" ng-src="{{options.icon}}"> 
      </div>
    </div>
    <div class="card-container-xs">
      <div class="header-card-arrow ">
        <i class="fa fa-long-arrow-down down-arrow"></i>
      </div>
      <div class="col-xs-10 header-card-desc">{{options.message}}</div>
    </div>
    <div class="col-md-12 header-card-desc">{{options.message}}</div>
    <div class="card-stat-container">
      <div ng-if="options.sub1"> 
        <span class="header-card-stat" ng-if='!options.invertsub'><b>{{options.sub1}}</b> {{options.sub2}}</span> 
        <span class="header-card-stat" ng-if='options.invertsub'>{{options.sub1}} <b>{{options.sub2}}</b></span>
      </div>
      <div class="arrow-container"> 
        <i class="fa fa-long-arrow-down down-arrow"></i> 
      </div>
    </div>
  </a>
</div>

Client Controller:

api.controller = function($scope,$document,$anchorScroll) {
	/* widget controller */
	var c = this;
	c.scrollTo=function(){
		var eID=c.options.navigate_id;
		//$anchorScroll(eID);
		$document[0].getElementById(eID).scrollIntoView({ 
			behavior: 'smooth' 
		});
	};
};

[dhananjay21]

@ryan.pope Were you able to make it work, im also facing the same issue, if you were able to resolve it then please let me know.

[ryan_pope · Accepted solution]

@dhananjay21 - yes, I did figure out how to resolve this. 

Here's the HTML template: (there shouldn't be any difference here - just using ng-click="c.scrollTo()"

<a ng-if="options.navigate_id" class="header-card" ng-click="c.scrollTo()">
    <div class="card-image-container">
      <div class="col-xs-12 header-card-icon"> 
        <img class="card-image" ng-src="{{options.icon}}"> 
      </div>
    </div>
    <div class="card-container-xs">
      <div class="header-card-arrow ">
        <i class="fa fa-long-arrow-down down-arrow"></i>
      </div>
      <div class="col-xs-10 header-card-desc">{{options.message}}</div>
    </div>
    <div class="col-md-12 header-card-desc">{{options.message}}</div>
    <div class="card-stat-container">
      <div ng-if="options.sub1"> 
        <span class="header-card-stat" ng-if='!options.invertsub'><b>{{options.sub1}}</b> {{options.sub2}}</span> 
        <span class="header-card-stat" ng-if='options.invertsub'>{{options.sub1}} <b>{{options.sub2}}</b></span>
      </div>
      <div class="arrow-container"> 
        <i class="fa fa-long-arrow-down down-arrow"></i> 
      </div>
    </div>
  </a>

The changes to make this work again are in the client controller:

var c = this;
    c.scrollTo = function() {

        var eID = c.options.navigate_id;
        var $el = $document[0].getElementById(eID);

        //$anchorScroll(eID);
        $timeout(function() {
            $el.scrollIntoView({
                behavior: "smooth"
            });
        }, 50);