Add 'back to top' of the page functionality

I have added back to top button. Please review

Think we should have screenshots added to the issue summary.

Also seems like a feature that should have some kind of test coverage.

Hi, I just tested the patch, it works well, but needs some improvement.

When the page is at the top, the back button should disappear and appear only when you start scrolling the page.

ahsannazir → made their first commit to this issue’s fork.

Hi
I've tested MR 8872 on Drupal 11
The MR is applied cleanly...

For no page scroll, there is No back-to-top button as expected, and when the page scrolls, the back-to-top button appears.

Attaching SS for reference
RTBC+1

Seems all the tags are still needed. Also forgot issue summary update from before

hi, I found the website below which has a button to go up to the top of the page. It's great because when you scroll the page, it displays around the arrow the length of the page. Can you add an animation for the length of the page (a circle like on the website below):

https://planb.network/courses

I've tested MR 8872 with the help of View live preview link.
i attached the video for refference.
I move it to RTBC.
THANKS!!

Left some general comments. We should also move this to a single directory component. It's a perfect use case.

Nice work. For the animation, how will you handle the infinite scrolling pages? Maybe by disabling the feature?

I created a new branch using SDC and CSS only (using scroll animations).

Right now the scroll stuff only works on Chromium. The main functionality works on all browsers.

That being said, I think we might still want to use Intersection Observer so that the show/hide works also works on all browsers.

Trying for a better title. On scanning I kept thinking this was a regression.

The 3250234-back-to-top-mikes-sdc-branch above is ready for review. I added a JS fallback for older browsers and fixed some linting.

Note the scroll progress only works in Chromium as progressive enhancement. I don't want to add a scroll event, which has the potential to slow down the browser.

@ehsann_95 I see you're still putting in a bit of effort on the other branch. You're welcome to continue to do so, but there's still quite of work to be done. You're welcome to review the new MR, which should be a bit closer to complete.

@mherchel . I will move my branch to hidden. I'll review the MR and see what can i do to move it furhter. Thanks!

ahsannazir → changed the visibility of the branch 3250234-add-the-functionality to hidden.

I have tested the Merge Request !8932 and after testing following are my observations.

• I have applied the MR as a patch and it applied with no errors and applied successfully.

• After applying the patch, it adds the "back to top" button at the bottom right of the screen for both the browsers , firefox and chrome.

• For chrome, while scrolling the screen around the button a progress bar was shown and it is also interactive while scrolling the page but this feature is not available for firefox.

• One thing I would like to point out which is that, after clicking the button for scrolling back to top and when the page is at the top the button does not disappear at its own, we have to again click back on the screen and then it disappears.

• Another thing, I am not sure whether to count it as an issue or an suggestion, the button is appearing after a certain amount of scrolling which is according to me could be reduced by a small margin.

• Overall the button is working smoothly. Attaching some screen recordings for reference.

  Thanks and regards.

Thanks for the review. We also have some failing tests for some reason.

For chrome, while scrolling the screen around the button a progress bar was shown and it is also interactive while scrolling the page but this feature is not available for firefox.

Yeah, the scroll indicator uses a browser feature that's not yet available to FF. My thought is that this is not necessary for the functionality, so I consider it progressive enhancement.

One thing I would like to point out which is that, after clicking the button for scrolling back to top and when the page is at the top the button does not disappear at its own, we have to again click back on the screen and then it disappears.

Yeah, this is an accessibility requirement (WCAG 2.4.7 Focus Visible), which states as long as a control as focus, it must remain visible. I wonder if we should shift focus to something else.

hey @mherchel,

Yeah, this is an accessibility requirement (WCAG 2.4.7 Focus Visible), which states as long as a control as focus, it must remain visible. I wonder if we should shift focus to something else.

If we ignore this as of now , rest is good and ready to move forward.
RTBC+

Thanks and regards.

tpham1023 → changed the visibility of the branch 3250234-back-to-top-mikes-sdc-branch to hidden.

tpham1023 → changed the visibility of the branch 3250234-back-to-top-mikes-sdc-branch to active.