Add 'back to top' of the page functionality

That's a very good idea! @mherchel what do you think? For sure if/after validation it needs design first

I'm definitely not opposed to it

@jwitkowski79 probably you can quickly suggest something so we can moving forward :)
Not sure if it should be separate issue or we can do everything right here

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'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

I've tested MR 8872 with the help of View live preview link.
I verify the button is working and progress bar show around the button.
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.

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!

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.

The pipeline is failing due to PHP Unit Functional tests are failing

Fail      Other      phpunit-38.xml       0 Drupal\Tests\block_content\Function
    PHPUnit Test failed to complete; Error: PHPUnit 10.5.38 by Sebastian Bergmann and contributors.
    
    Runtime:       PHP 8.3.14
    Configuration: /builds/issue/drupal-3250234/core/phpunit.xml.dist

---- Drupal\Tests\system\Functional\System\ThemeTest ----
Status    Group      Filename          Line Function                            
--------------------------------------------------------------------------------
Fail      Other      phpunit-17.xml       0 Drupal\Tests\system\Functional\Syst
    PHPUnit Test failed to complete; Error: PHPUnit 10.5.38 by Sebastian Bergmann and contributors.
    
    Runtime:       PHP 8.3.14
    Configuration: /builds/issue/drupal-3250234/core/phpunit.xml.dist

---- Drupal\Tests\olivero\Functional\NodeTitleTest ----
Status    Group      Filename          Line Function                            
--------------------------------------------------------------------------------
Fail      Other      phpunit-67.xml       0 Drupal\Tests\olivero\Functional\Nod
    PHPUnit Test failed to complete; Error: PHPUnit 10.5.38 by Sebastian Bergmann and contributors.
    
    Runtime:       PHP 8.3.14
    Configuration: /builds/issue/drupal-3250234/core/phpunit.xml.dist

Removing Needs Screenshots