fix: show back to top button at bottom

components/buttons/ScrollButton.tsx

@@ -1,42 +1,65 @@
+/// <reference types="node" />
+
 import React, { useEffect, useState } from 'react';
 
 /**
- * @returns {React.JSX.Element} The ScrollButton component
- * @description The ScrollButton component is a button that scrolls the user to the top of the page.
+ * ScrollButton component shows a "Back to Top" button at the bottom of the page.
+ * The button is visible only when the user scrolls to the bottom of the page.
  */
-function ScrollButton() {
-  const [backToTopButton, setBackToTopButton] = useState(false);
-  const scrollImage = '/img/loaders/scroll.svg';
+const ScrollButton: React.FC = () => {
+  const [isBottom, setIsBottom] = useState(false);
 
   useEffect(() => {
-    window.addEventListener('scroll', () => {
-      if (window.scrollY > 150) {
-        setBackToTopButton(true);
-      } else {
-        setBackToTopButton(false);
+    const handleScroll = () => {
+      const scrollPosition = window.innerHeight + window.pageYOffset;
+      const pageHeight = document.documentElement.scrollHeight;
+
+      setIsBottom(scrollPosition >= pageHeight);
+    };
+
+    // Initialize the button visibility on mount
+    handleScroll();
+
+    let throttleTimeout: NodeJS.Timeout | null = null;
+
+    const throttledHandleScroll = () => {
+      if (throttleTimeout === null) {
+        throttleTimeout = setTimeout(() => {
+          handleScroll();
+          throttleTimeout = null;
+        }, 100);
       }
-    });
+    };
+
+    window.addEventListener('scroll', throttledHandleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', throttledHandleScroll);
+
+      if (throttleTimeout) {
+        clearTimeout(throttleTimeout);
+      }
+    };
   }, []);
 
-  const scrollUp = () => {
-    window.scrollTo({
-      top: 0,
-      behavior: 'smooth'
-    });
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
   };
 
+  if (!isBottom) return null;
+
   return (
-    <div className='fixed bottom-14 right-4 z-40 h-16 w-12'>
-      {backToTopButton && (
-        <button
-          className='rounded-full bg-white shadow-md transition-all duration-300 ease-in-out hover:scale-110 hover:bg-[#8851FB]'
-          onClick={scrollUp}
-        >
-          <img src={scrollImage} alt='scroll to top' />
-        </button>
-      )}
-    </div>
+    <button
+      onClick={scrollToTop}
+      className='fixed bottom-6 right-6 z-50 h-12 w-12 rounded-full bg-purple-600
+                 text-white shadow-md hover:bg-purple-700 transition duration-300
+                 flex items-center justify-center text-lg'
+      aria-label='Scroll to top'
+      type='button'
+    >
+      ↑
+    </button>
   );
-}
+};
 
 export default ScrollButton;

markdown/docs/community/060-meetings-and-communication/docs-community.md

@@ -1,20 +1,20 @@
----
-title: 'AsyncAPI docs community'
-weight: 20
----
-
- [Schedule your own docs meetings](MEETINGS_ORGANIZATION).
-
-## AsyncAPI Slack workspace and docs channels
-Join the [AsyncAPI documentation Slack channel](https://join.slack.com/share/enQtNjUxNTY1NTU1MDk0NS1mYjNhODFhZDI3ZDRjODA1ZWRkZTZlYmM4ZTNjNzZjNTg5NTBiYjNmNTkwYzRlYzY4ZjQ4M2RhMDYzMjI3N2U5) to meet other technical writers:
-
-- **#13_docs:** A space for all technical writers to start discussions, ask questions, share new ideas, and request `good first issues.`
-
-## AsyncAPI documentation roadmap 2024
-Stay tuned for new opportunities on our [Docs’ Community discussions](https://github.com/orgs/asyncapi/discussions/categories/docs-education) or reach out in the AsyncAPI Slack channel **#13_docs**.
-
-| Docs Roadmap | Ongoing Docs Projects | Timeline | Contribution Type |
-|--------------|-----------------------|----------|---------------------|
-| AsyncAPI Style Guide | [AsyncAPI Style Guide](https://github.com/asyncapi/website/issues/1240) | Ongoing | Regular contribution |
-| AsyncAPI Tools’ Docs | <li>[Modelina Docs](https://github.com/asyncapi/modelina/tree/master/docs) </li>  <li>[Parser Docs](https://github.com/asyncapi/parser-js/tree/master/docs) </li> <li>[GitHub Actions Docs](https://github.com/asyncapi/github-action-for-generator)</li> <li>[Studio Docs](https://github.com/asyncapi/studio/tree/master/doc/adr)</li> <li>[Generator Docs](https://github.com/asyncapi/generator/tree/master/docs)</li> <li>[CLI Docs](https://github.com/asyncapi/cli/tree/master/docs)</li> | Ongoing | Regular contribution |
-| Technical Writer Onboarding Guide | Onboarding Guide for new docs contributors | Ongoing | Regular contribution |
+---
+title: 'AsyncAPI docs community'
+weight: 20
+---
+
+ [Schedule your own docs meetings](MEETINGS_ORGANIZATION).
+
+## AsyncAPI Slack workspace and docs channels
+Join the [AsyncAPI documentation Slack channel](https://join.slack.com/share/enQtNjUxNTY1NTU1MDk0NS1mYjNhODFhZDI3ZDRjODA1ZWRkZTZlYmM4ZTNjNzZjNTg5NTBiYjNmNTkwYzRlYzY4ZjQ4M2RhMDYzMjI3N2U5) to meet other technical writers:
+
+- **#13_docs:** A space for all technical writers to start discussions, ask questions, share new ideas, and request `good first issues.`
+
+## AsyncAPI documentation roadmap 2024
+Stay tuned for new opportunities on our [Docs’ Community discussions](https://github.com/orgs/asyncapi/discussions/categories/docs-education) or reach out in the AsyncAPI Slack channel **#13_docs**.
+
+| Docs Roadmap | Ongoing Docs Projects | Timeline | Contribution Type |
+|--------------|-----------------------|----------|---------------------|
+| AsyncAPI Style Guide | [AsyncAPI Style Guide](https://github.com/asyncapi/website/issues/1240) | Ongoing | Regular contribution |
+| AsyncAPI Tools’ Docs | <li>[Modelina Docs](https://github.com/asyncapi/modelina/tree/master/docs) </li>  <li>[Parser Docs](https://github.com/asyncapi/parser-js/tree/master/docs) </li> <li>[GitHub Actions Docs](https://github.com/asyncapi/github-action-for-generator)</li> <li>[Studio Docs](https://github.com/asyncapi/studio/tree/master/doc/adr)</li> <li>[Generator Docs](https://github.com/asyncapi/generator/tree/master/docs)</li> <li>[CLI Docs](https://github.com/asyncapi/cli/tree/master/docs)</li> | Ongoing | Regular contribution |
+| Technical Writer Onboarding Guide | Onboarding Guide for new docs contributors | Ongoing | Regular contribution |