search

danielschuster-muc / potter-db

A Harry Potter database for all your wizarding needs: Books, Characters, Movies, Spells, and Potions. Powered by https://github.com/danielschuster-muc/scrabby
https://potterdb.com
MIT License
98 stars 38 forks source link

Create ScrollToTop button #795

Closed kristenking closed 1 year ago

kristenking commented 1 year ago

Summary

Implemented a scroll to top button as per issue requirements. Positioned at the bottom right, it appears once the user scrolls down and smoothly takes them to the top when clicked. The icon comes from react-icons. Used React hooks to handle the button's visibility based on the page's scroll position. The button styling is done with Tailwind CSS to ensure it matches the website's color theme.

Changes:

  1. Created ScrollToTopButton component.
  2. Added ScrollToTopButton to the general layout component.

Testing:

Checked button visibility and functionality on various pages and on mobile.

Related Issues

Fixes #787

Checklist

Screenshots (if applicable)

image

image

image

vercel[bot] commented 1 year ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
potter-db ✅ Ready (Inspect) Visit Preview Oct 29, 2023 10:54pm
1 Ignored Deployment | Name | Status | Preview | Updated (UTC) | | :--- | :----- | :------ | :------ | | **potter-db-docs** | ⬜️ Ignored ([Inspect](https://vercel.com/danielschuster-muc/potter-db-docs/PuyKcfMWGzAkzQFY9YSZhQUiypsz)) | [Visit Preview](https://potter-db-docs-git-fork-kristenking-s-3b025e-danielschuster-muc.vercel.app) | Oct 29, 2023 10:54pm |
kristenking commented 1 year ago

Thank you for the review @danielschuster-muc . Ran npm run lint and pushed the changes. Let me know if anything else needs adjusting.

kristenking commented 1 year ago

Thanks for approval @danielschuster-muc . I will wait till it is merged then :)