[#12222] Instructor help page: Page not scrolling to the right section

[noreddinelam]

Fixes #12222

Outline of Solution

To resolve this issue, I use to calculate the y coordinate of the section and I used the scrollTo function directly to do it.
The problem was in these two lines :
el.scrollIntoView(); window.scrollBy(0, -50);

The second instruction is not waiting for the first one to finish and do the scroll by -50px.

I removed the '#helpPage' because it is not necessary to get all the children and then search for the section using the id.

[noreddinelam]

Still waiting for review

[samuelfangjw]

Still waiting for review

Open source maintainers on this project are unpaid volunteers with their own work commitments as well. Please be patient on this.

[weiquu]

Hi @noreddinelam, sorry for the delay! The fix works, but I'm just wondering if it would be better to use a more standard Bootstrap approach. You can refer to this (in particular the .js code)

Edit: Sorry please ignore and refer to @zhaojj2209's reply (:

[zhaojj2209]

TEAMMATES makes use of PageScrollService from the ngx-page-scroll-core library, not sure why this wasn't used here previously. Maybe using this would help to simply things?

[noreddinelam]

@samuelfangjw I am sorry. When i saw in the documentation this :

i added the comment but of course i understand what u mean.

[noreddinelam]

@zhaojj2209 Yeah I noticed that. I tried to use it but unfortunately, It was not working and it was scrolling by like 1cm.

As mentioned here ; (an issue opened in the official project) :

The issue link if u want to read all the discussion.

Now, I found a solution and what was the problem. As mentioned in the issue, they said that the scrolling behavior smooth is not working with ngx-page-scroll. The default behavior when we use bootstrap, is smooth and as consequence, all the scrolling mechanism when u touch a link was not working in the application.

Here is the solution :
Set the scroll behavior to auto in the style.scss file like this :

html { scroll-behavior: auto !important; }

And then we can use the ngx-page-scroll.

If u agree with the solution, I can provide a new version of the code.

Feel free to give me more hints.

[zhaojj2209]

@noreddinelam Thank you for investigating this issue! Yes, please proceed with the fix. I suspect this will help to resolve scroll issues elsewhere on the site as well.

[zhaojj2209]

LGTM, thanks for the changes!

[noreddinelam]

Thanks, for the approval.

Just a question i think that my branch is out-of-date with the master branch so I don't know If I should click on update branch or let you do it when you merge.

[zhaojj2209]

Just a question i think that my branch is out-of-date with the master branch so I don't know If I should click on update branch or let you do it when you merge.

Feel free to update the branch on your end. Maintainers can do it as well (and we do often update contributor PRs before merging), but that usually means our names will show up as PR co-author.

[noreddinelam]

@zhaojj2209 thanks for explanation and the hints given to resolve this issue. I did update the branch.