Angular 4 | Window.Scrollto(); Is Not Working Properly

Angular 4 | window.scrollTo(); is not working properly

try into html

<div #list [scrollTop]="list.scrollHeight"></div>

Solution 2

In Component
define id into html id="scrollId"

const element = document.querySelector('#scrollId');
element.scrollIntoView();

JavaScript scrollTo method does nothing?

I was able to resolve this problem using jQuery method animate(). Here is an example of the implementation I went with:

$('#content').animate({ scrollTop: elementOffset }, 200);

The selector is getting the div with ID = "content". I am then applying the animate method on it with scrollTop as an option. The second parameter is the time in milliseconds for the animation duration. I hope this helps someone else.

Angular 2 scrollIntoView Not Scrolling

You can use Angular's Renderer

Supply a Second Argument for selectRootElement as per Angular's Official Documentation as it is used to preserve your content

Syntax: selectRootElement(selectorOrNode: any, preserveContent?: boolean): any

Had created a Stackblitz Demo for your reference

import { Component, AfterViewInit, Renderer2 } from '@angular/core';


@Component({...})
export class ChildComponent implements AfterViewInit {

  sFragment: string;

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit(): void {
      this.sFragment = 'footerWrapperTop';

      const element = this.renderer.selectRootElement(`#${this.sFragment}`, true); // true to indicate that you will preserve the content

      element.scrollIntoView({ behavior: 'smooth' });   // for smooth scrolling

  }

}

Can't get scrollTop() to work in both Chrome & Firefox

Use the document object instead

$(document).scrollTop();

logout function not working properly.It works after clicking 3 to 4 times.Initially it just reloads the page but does not logout

The problem is on here: (it reloads the page and navigats to login, before waiting for logout response.)

logout() {
    this.loginService.logout().subscribe(
        res => {
            console.log("logout  clicked inside res");
            localStorage.setItem('PortalAdminHasLoggedIn', '');
        },
        err => console.log(err)
    );
    console.log("logout  clicked before reload");
    location.reload();
    console.log("logout  clicked before reload");
    this.router.navigate(['/login']);
}

when you subscribe to result of logout method, you should wait for it to get the result (it's asynchronous.). So change it to:

logout() {
    this.loginService.logout().subscribe(
        res => {
            console.log("logout  clicked inside res");
            localStorage.setItem('PortalAdminHasLoggedIn', '');
            this.router.navigate(['/login']);
            location.reload();
        },
        err => console.log(err)
    );
}

Scroll to the top of the page using JavaScript?

If you don't need the change to animate then you don't need to use any special plugins - I'd just use the native JavaScript window.scrollTo() method -- passing in 0, 0 will scroll the page to the top left instantly.

window.scrollTo(xCoord, yCoord);

Parameters

• xCoord is the pixel along the horizontal axis.
• yCoord is the pixel along the vertical axis.

Angular $location.path not working

You should run the expression as function in the $apply() method like

app.run(function ($location, $window, $rootScope) {
  $window.addEventListener('message', function(e) {
      $rootScope.$apply(function() {
        $location.path("/abc");
        console.log($location.path());
      });
  });
});

See documentation - ng.$rootScope.Scope.

If you want to improve testability, use $console instead of console and inject that object as well.

---

Related Topics