Added Scroll to top feature

desktop-app/src/renderer/components/Previewer/Device/Toolbar.tsx

@@ -138,6 +138,15 @@ const Toolbar = ({
     onRotate(!rotated);
   };
 
+  const scrollToTop = () => {
+    if (webview) {
+      webview.executeJavaScript(
+        'window.scrollTo({ top: 0, behavior: "smooth" })',
+        false
+      );
+    }
+  };
+
   return (
     <div className="flex items-center justify-between gap-1">
       <div className="my-1 inline-flex max-w-[75%] items-center gap-1 overflow-x-auto">
@@ -190,6 +199,9 @@ const Toolbar = ({
         <Button onClick={toggleRulers} title="Show rulers">
           <Icon icon="tdesign:measurement-1" />
         </Button>
+        <Button onClick={scrollToTop} title="Scroll to Top">
+          <Icon icon="ic:baseline-arrow-upward" />
+        </Button>
         <ColorBlindnessTools webview={webview} />
       </div>
       <Button

desktop-app/src/renderer/components/Previewer/Device/index.tsx

@@ -495,6 +495,61 @@ const Device = ({ isPrimary, device, setIndividualDevice }: Props) => {
   const scaledHeight = height * zoomfactor;
   const scaledWidth = width * zoomfactor;
 
+  useEffect(() => {
+    const webview = ref.current;
+    if (!webview) return;
+
+    const injectScrollToTopButton = () => {
+      webview
+        .executeJavaScript(`document.readyState`, false)
+        .then((readyState) => {
+          if (readyState !== 'complete') {
+            throw new Error('Document not ready for injection.');
+          }
+
+          const buttonHTML = `
+            <button id="scrollToTopButton" style="position: fixed; right: 20px; bottom: 20px; z-index: 1000; padding: 10px 15px; font-size: 16px; border: none; background-color: #007BFF; color: white; border-radius: 5px; cursor: pointer; opacity: 0; transition: opacity 0.5s;">
+              ↑
+            </button>
+          `;
+          const script = `
+            document.body.insertAdjacentHTML('beforeend', '${buttonHTML.replace(
+              /\n/g,
+              ''
+            )}');
+            const scrollToTopButton = document.getElementById('scrollToTopButton');
+            scrollToTopButton.onclick = function() {
+              window.scrollTo({ top: 0, behavior: 'smooth' });
+            };
+  
+            window.addEventListener('scroll', function() {
+              if (window.scrollY > 100) {
+                scrollToTopButton.style.opacity = 1;
+              } else {
+                scrollToTopButton.style.opacity = 0;
+              }
+            });
+          `;
+
+          return webview.executeJavaScript(script, false);
+        })
+        .then(() => null)
+        .catch((err) => {
+          console.error('Error executing script or loading document:', err);
+        });
+    };
+
+    webview.addEventListener('dom-ready', injectScrollToTopButton);
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      if (webview) {
+        webview.removeEventListener('dom-ready', injectScrollToTopButton);
+      }
+      return undefined;
+    };
+  }, [ref]);
+
   return (
     <div
       className={cx('h-fit flex-shrink-0', {