Closed

How to force scroll page to top on every pages #4351

lan.dang created 3 years ago

ABP Framework version: v7.0
UI type: Blazor
DB provider: EF Core
Tiered (MVC) or Identity Server Separated (Angular): no
Exception message and stack trace:
Steps to reproduce the issue:" When open new page, system still keep previous position. I want to it reset page to top, how can I do that?

14 Answer(s)

0

maliming created 3 years ago
Support Team Fullstack Developer

hi

You can try to call the javascript function to scroll to the top on LocationChanged event.

https://blazor-university.com/routing/detecting-navigation-events/ https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.navigationmanager.locationchanged?view=aspnetcore-7.0

Markdown supported.

Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
0

lan.dang created 3 years ago

Thank you, What is component or page I should overwrite to add this script? I dont know which component will be called when any page loaded

Markdown supported.

Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
0

maliming created 3 years ago
Support Team Fullstack Developer

hi

You can try to add a Layout-Hooks

https://docs.abp.io/en/abp/latest/UI/Blazor/Layout-Hooks

Markdown supported.

Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
0

lan.dang created 3 years ago

I tried this one before but got error "

Do you know what is issue?

Markdown supported.

Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
0

maliming created 3 years ago
Support Team Fullstack Developer

What's your code?

Markdown supported.

Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
0

lan.dang created 3 years ago

I added new razor page

Add to ConfigureServices

Code behind is same as document

Markdown supported.

Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
0

maliming created 3 years ago
Support Team Fullstack Developer

hi

Try to rename your class as ScrollToTopComponent

Markdown supported.

Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
0

lan.dang created 3 years ago

Hi, it is same error, I just change name to exact name AnnouncementComponent but not work as well

Markdown supported.

Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
0

maliming created 3 years ago
Support Team Fullstack Developer

hi

I will test this.

Markdown supported.

Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
0

maliming created 3 years ago
Support Team Fullstack Developer

hi

Can you share your project? liming.ma@volosoft.com

Markdown supported.

Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
0

lan.dang created 3 years ago

Yes i just add component and add it to ConfigureServices Please have a look at my change

Markdown supported.

Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
0

maliming created 3 years ago
Support Team Fullstack Developer

hi This is an app issue, we will fix the scroll issue in the next patch release.

Markdown supported.

Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
0

lan.dang created 3 years ago

Thank you, waiting for hearing update from you

Markdown supported.

Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
0

maliming created 3 years ago
Support Team Fullstack Developer

We will solve the problem as soon as possible

Markdown supported.

Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)