FAQ

No animation is started

• Make sure that there's no javascript error on the developer console (Press F12 key to open it) which might help tracing down an error in the application or library. Reload your application with the developer tools open to catch all logs.
• Check the console for debug messages by ng2-page-scroll like "Scrolling not possible, as we can't get any closer to the destination" or "Scrolling not possible, as we can't find the specified target".
• Investigate whether the correct scrollview is used. Based on the HTML and CSS setup the body might not be the correct one.

Is it possible to use route feature for scrolling with the PageScrollService?

It is not possible to use the route detection feature for scrolling with the PageScrollService. The route detection feature is only available to the pageScroll directive to simplify the usage on e.g. menus of single-page applications.

To trigger an animation that uses the PageScrollService as soon as new route has been loaded, use the OnInit lifecycle hook to start the scroll animation. You may use route queryParams to provide additional information to the route's component to only trigger the scroll animation in certain situations.

<a [routerLink]="['/page']" [queryParams]="{scrollToSection: true}">link</a>

@Component({...})
class MyComponent implements OnInit {
  constructor(route: ActivatedRoute) {
  }
  ngOnInit() {
    this.activeRoute.queryParams.subscribe(params => {
      if (params.scrollToSection){
         // Start scrolling here
      }
    });
  }
}

Read more about the routerLink directive and the activatedRoute at the official angular documentation.

Is it possible to detect the current scroll section?

Detecting the current scroll section is not possible with ng2-page-scroll. This library only manipulates the scroll position but does not perform any "read" actions of the current scroll position. Look for something like "scrollspy" or "bootstrap affix". There's a PR waiting for ng2-bootstrap or check out the ng2-scrollspy project.

How to get scrolling work when using MdSidenav from @angular/material library?

The md-sidenav introduces some new elements in the DOM hierarchy which are not present while editing your applications html. This prevents it from adding an id attribute to them to refer to them when creating a new PageScrollInstance. Refer to this example plunkr for a working example: https://plnkr.co/edit/mmBS1AZv7Jd7eCTrFCOZ?p=preview

Original github issue: https://github.com/Nolanus/ng2-page-scroll/issues/104#issuecomment-291068292

How does this speed option work?

The pageScrollSpeed option can be used to produce scroll animations that scroll with a given speed (distance per time interval) no matter how far away the scroll target is. When only using the pageScrollDuration option small distance scroll animations where unreasonable slow while long distance animations where extremely fast.

The pageScrollSpeed option uses the calculated scroll distance to determine the perfect scroll duration that would result in the specified speed for a linear scroll animation. This means: when performing a scroll animation with a speed of 500 and a linear easing function, every second 500 pixel will be scrolled.

As the calculated duration is used to perform the actual scroll animation it is possible to use custom easing functions together with the pageScrollSpeed option. However, the easing function of course manipulates the scroll position, resulting in only the average speed matching the specified speed. Example: Take a scroll animation with speed of 500px/s and an easeOutQuint easing function. In the first half of the scroll animation the number of pixels scrolled will be greater than the specified 500px/s, in the second half it will be less. On average it will be 500px/s.

Incorrect scroll position with nested scrolling

For nested scrolling (inline scrolling) the scrollTarget elements offsetTop is used to determine the necessary scroll distance (offsetLeft respectively for horizontal scrolling). This property returns the position of the scrollTarget relative to the next parent element in the DOM view hierarchy with position: relative. Based on your page structure and CSS there might be relatively positioned elements inside the scrollView. The following example showcases this:

<div class="scrollView">
  ...
  <div style="position: relative;">
    <h2 id="scrollTarget">Scroll here</h2>
    ...
  </div>
  ...
</div>

To properly get the correct scroll distance in these situations, ng2-page-scroll library offers an optional advanced offset calculation setting advancedInlineOffsetCalculation. When enabled (true) it traverses the DOM hierarchy to detect the relatively positioned parents and consider them for the offset calculation.

PageScrollInstance.newInstance({
  ...
  advancedInlineOffsetCalculation: true
});