JM Tech Power

Guides

Back to top on project detail pages

← All articles 邮箱 RSS Atom

Scrolling a long JM Tech Power project detail page and want a quick way back to the start? Project pages now reuse the same floating Back to top control as article pages (ja-back-top). After you scroll down, the button fades in so you can return to the heading without hunting for the browser chrome.

How to use it

  • Open any public project. Browse from https://jmtechpower.com/projects and open a project detail page.
  • Scroll about 500 pixels. The floating Back to top button appears near the corner once you have scrolled far enough.
  • Tap Back to top. The page jumps (or smoothly scrolls) back to the start of the project detail view.

What you will notice

  • Same control as articles. Project detail reuses the article ja-back-top class, styles, and behaviour — one shared pattern instead of a separate widget.
  • Shows after ~500px of scroll. Until then it stays hidden so short project pages stay uncluttered.
  • Respects reduced motion. If your system prefers reduced motion, the jump is instant; otherwise the scroll is smooth.
  • Project detail only. The projects index and other site pages do not get this control — only individual project detail pages.
  • Not the article Back to top guide. Article detail also uses ja-back-top; that tip is covered in a separate Guides post. This one is about project pages.

Good to know

  • Chinese labels too. With the Chinese locale the button reads 回到顶部; screen readers hear the same label via the aria-label.
  • No account required. Guests and signed-in readers see the same Back to top control on every public project detail page.
  • Keyboard friendly. The control has a clear label and is reachable when you tab through the page.

Browse projects at https://jmtechpower.com/projects, or go home at https://jmtechpower.com/.

评论 (0)

暂无评论,成为第一个评论者!