Enable Back to Top component to appear dynamically based on page height

[randimays]

Bug Report

• I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

The existing guidance for the Back to top (BTT) component says that it should not be used on pages with dynamic content. This excludes quite a few pages (all Drupal pages), even when a BTT component would be helpful on those pages.

We have some examples of BTT being used on pages that have dynamic content:

• http://preview-staging.vfs.va.gov/preview?nodeId=720
• https://www.va.gov/health-care/about-va-health-benefits/
• https://www.va.gov/resources/health-care/

This code and guidance likely predates most of us. But it's worth noting that our usage of the component is inconsistent, and it doesn't make sense to leave the decision of whether to include BTT to the individual page or the teams. We propose:

The Back to top component should appear dynamically (based on the page height).

If the BTT component can calculate when it should appear based on page height, we can then add the component to basic page templates, and remove the decision-making on when to add it from the teams.

Slack thread for context: https://dsva.slack.com/archives/C01DBGX4P45/p1714680374615469

What I expected to happen

I expect the BTT component to appear on every page of VA.gov where scrolling is needed.

Urgency

How urgent is this request? Please select the appropriate option below and/or provide details

• This bug is blocking work currently in progress
• This bug is affecting work currently in progress but we have a workaround
• This bug is blocking work planned within the next few sprints
• This bug is not blocking any work
• Other

Details

[caw310]

Hey team! Please add your planning poker estimate with Zenhub @Andrew565 @ataker @harshil1793 @it-harrison @jamigibbs @micahchiang @nickjg231 @powellkerry @rmessina1010 @rsmithadhoc

[ataker]

We'll address the guidance in another ticket. Back to top can be used in dynamic pages. Closing this one.

[randimays]

@ataker Could you clarify the resolution here?

What we would like to be able to do is add va-back-to-top to every single page template on VA.gov, and have the component appear only if the page is long enough. Ideally, the web component would calculate this on its own and display when necessary.

We are already using va-back-to-top on pages with dynamic content, but we can't predict the length of every page that is using the template. So the va-back-to-top sometimes shows up on pages that are very short.

[randimays]

CC @jilladams @FranECross @laflannery for awareness