Plans: scroll to the top when moving across pages

[rcanepa]

Changes proposed in this Pull Request

• On mobile, if you move across pages, the scroll position doesn't get reset, which makes the experience confusing. This PR adds a reset in both the Details and the Upsell pages.

Testing instructions

• Run this PR.
• Configure your browser in mobile mode. We want a screen with a small viewport.
• Visit the Plans page /plans/:site.
• Test the flows of the following products (without going to checkout): Jetpack Security, Jetpack Backup, and Jetpack Scan.
• Verify that every time you visit the Details page the scroll is reset to the top of the page.
• Verify that every time you visit the Upsell page the scroll is reset to the top of the page.

Fixes 1169247016322522-as-1193973893888697

Demo

Before

After

[matticbot]

Test live: https://calypso.live/?branch=improve/scroll-to-top-in-plans-pages

[rcanepa]

To reset the scroll just after the first render.

[rcanepa]

To reset the scroll just after the first render.

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~109 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
plans                       +102 B  (+0.0%)      +36 B  (+0.0%)
jetpack-connect             +102 B  (+0.0%)      +37 B  (+0.0%)
jetpack-cloud-pricing       +102 B  (+0.0%)      +36 B  (+0.1%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[elliottprogrammer]

Yes, works great. A much better experience, indeed!
LGTM! 👍