Scroll to top of the HTML page whenever refresh the page

Question

I am fighting with a small issue for a few hours.

I am working on Angular-9, in the HTML page, I have a very long table(500 rows data). when I going to the bottom of the table and then refresh the page, it will be on the bottom of the page. not scrolling to the top of the page.

but whenever I refresh the page, the page should go to the top of the HTML page(top of the table).

Actually, I have searched a lot of google solutions, but no one is work.

Can u please suggest how to resolve this?

This heavily depends on your HTML structure and how you display your data. You should add some code, so we can see how it looks like. Also, please provide what "google solutions" you tried that did not work. — pascalpuetz, Oct 31 '20 at 09:12
3. $('document').ready(function() { $(window).scrollTop(0); }); — Siva, Oct 31 '20 at 09:16
And the `window` is your scrollable container? Pretty sure you have another container inside that is the scrollable one. — pascalpuetz, Oct 31 '20 at 09:16
Just use the ngAfterContentInit lifecycle method and add a document.body.scrollTop = 0; or a document.documentElement.scrollTop = 0 inside it? — Rishabh Anand, Oct 31 '20 at 09:18
Pretty sure the document is not his scrollable element, but a `div` or something. You need to call this method on that element. — pascalpuetz, Oct 31 '20 at 09:24
Just use the ngAfterContentInit lifecycle method and add a document.body.scrollTop = 0; or a document.documentElement.scrollTop = 0 inside it? Not working bro... — Siva, Oct 31 '20 at 09:24
yeah... its is scrollable container. because 500 above rows in that table — Siva, Oct 31 '20 at 09:26

score 0 · Answer 1 · answered Oct 31 '20 at 09:16

0

Add this in js file.

$(this).scrollTop(0);

answered Oct 31 '20 at 09:16

Rafee Shaik

681
4
10

score 0 · Answer 2 · answered Oct 31 '20 at 09:28

0

If you have a header component you can directly try this, or just make a empty div at the top of the page with id header and paste this in your main function.
Make sure of the ID or it will not work.

const header= document.getElementById('#header');
header.scrollIntoView();

answered Oct 31 '20 at 09:28

Vyom Desai

61
3

In HTML:
In TS file: ngOnInit(): void { const header= document.getElementById('#header'); header.scrollIntoView(); } But not working bro... – Siva Oct 31 '20 at 09:34
The HTML you provided in your comment suggests a div with ID "topPage". For this you will have to change the TS code as such: ```const header= document.getElementById('#topPage'); header.scrollIntoView();``` @Siva – Vyom Desai Oct 31 '20 at 09:42
Yeah. I have changed.. But still not working bro.. – Siva Oct 31 '20 at 09:45
@Siva check this one out https://stackoverflow.com/a/48048822/14547185 – Vyom Desai Oct 31 '20 at 09:54
yeah... ur shared linked is working fine... thanks for ur help... – Siva Nov 01 '20 at 13:44
If it worked please upvote it so that it reaches to more peple thanks! @Siva – Vyom Desai Nov 01 '20 at 18:56

score 0 · Answer 3 · answered Oct 31 '20 at 09:43

On your template, add a template variable to your scrollable container like this:

<div #myScrollableContainer>
   <!-- Here is your content that scrolls -->
</div>

And on your component get that one with @ViewChild and set the scrollTop on that.

@Component({ /*...*/ })
export class MyComponent {
   // pass the name of the template variable you picked with # on your template
   @ViewChild('myScrollableContainer') private myContainer:ElementRef<HTMLDivElement>;

   // Call this when you want to scroll to top
   public scrollToTopOfScrollable():void {
      this.myContainer.nativeElement.scrollTop = 0;
   }
}

Scroll to top of the HTML page whenever refresh the page

3 Answers3