Add the functionality back to the top of the page

Created on 18 November 2021, about 3 years ago
Updated 28 April 2023, over 1 year ago

Olivero is a theme created for accessibility, it would be great if the theme can integrate a button to go back to the top of the page. Websites often have long pages, this functionality becomes essential.

Feature request
Status

Needs review

Version

10.1

Component
Olivero 

Last updated 4 days ago

Created by

🇫🇷France zenimagine

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Open in Jenkins → Open on Drupal.org →
    Environment: PHP 8.1 & MySQL 5.7
    last update over 1 year ago
    29,366 pass
  • 🇮🇳India gauravvvv Delhi, India

    I have added back to top button. Please review

  • Status changed to Needs work over 1 year ago
  • 🇺🇸United States smustgrave

    Think we should have screenshots added to the issue summary.

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

  • 🇫🇷France zenimagine

    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.

  • First commit to issue fork.
  • Merge request !8872Issue #3250234: Add back-to-top button. → (Open) created by Unnamed author
  • Pipeline finished with Success
    5 months ago
    Total: 492s
    #230925
  • Pipeline finished with Success
    5 months ago
    Total: 748s
    #231738
  • Pipeline finished with Failed
    5 months ago
    Total: 167s
    #231848
  • Pipeline finished with Running
    5 months ago
    #231891
  • Status changed to Needs review 5 months ago
  • 🇮🇳India Kanchan Bhogade

    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

  • Status changed to Needs work 5 months ago
  • 🇺🇸United States smustgrave

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

  • 🇫🇷France zenimagine

    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

  • Pipeline finished with Failed
    5 months ago
    Total: 165s
    #232760
  • Pipeline finished with Success
    5 months ago
    Total: 516s
    #232832
  • Pipeline finished with Success
    5 months ago
    Total: 519s
    #233569
  • Status changed to Needs review 5 months ago
  • Status changed to RTBC 5 months ago
  • 🇮🇳India chandansha

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

  • Status changed to Needs work 5 months ago
  • 🇺🇸United States mherchel Gainesville, FL, US

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

  • 🇫🇷France zenimagine

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

  • Merge request !8932SDC and CSS only version of back to top. → (Open) created by mherchel
  • Pipeline finished with Failed
    5 months ago
    Total: 161s
    #234341
  • 🇺🇸United States mherchel Gainesville, FL, US

    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.

  • 🇳🇿New Zealand quietone

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

  • Pipeline finished with Success
    5 months ago
    Total: 513s
    #234485
  • Pipeline finished with Failed
    5 months ago
    Total: 160s
    #234993
  • Status changed to Needs review 5 months ago
  • 🇺🇸United States mherchel Gainesville, FL, US

    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.

  • Pipeline finished with Canceled
    5 months ago
    Total: 747s
    #235001
  • Pipeline finished with Failed
    5 months ago
    #235009
  • 🇮🇳India ahsannazir

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

  • 🇮🇳India ahsannazir

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

  • Status changed to Needs work 5 months ago
  • 🇮🇳India Hritick

    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.

  • 🇺🇸United States mherchel Gainesville, FL, US

    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.

  • 🇮🇳India Hritick

    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.

  • 🇺🇸United States tpham1023

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

  • 🇺🇸United States tpham1023

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

  • First commit to issue fork.
  • Pipeline finished with Failed
    24 days ago
    Total: 1071s
    #357271
  • Pipeline finished with Failed
    23 days ago
    Total: 611s
    #358530
  • Pipeline finished with Failed
    21 days ago
    Total: 407s
    #360933
  • 🇮🇳India ahsannazir

    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
    
  • 🇸🇬Singapore anish.a Singapore

    Removing Needs Screenshots

  • Pipeline finished with Failed
    14 days ago
    Total: 153s
    #366762
  • Pipeline finished with Failed
    14 days ago
    #366796
  • Pipeline finished with Failed
    14 days ago
    Total: 1481s
    #366869
Production build 0.71.5 2024