Add ability for teams test app to remember scroll position on reload

apps/teams-test-app/package.json

@@ -20,6 +20,7 @@
     "start:local": "webpack serve --config webpack.local.config.js"
   },
   "dependencies": {
+    "lodash.throttle": "^4.1.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },

apps/teams-test-app/src/App.tsx

@@ -64,6 +64,8 @@ import Version from './components/Version';
 import VideoAPIs from './components/VideoEffectsApis';
 import VisualMediaAPIs from './components/VisualMediaAPIs';
 import WebStorageAPIs from './components/WebStorageAPIs';
+import RememberScrollToggle from './components/RememberScrollToggle';
+import ScrollToTopButton from './components/ScrollToTop';
 
 const urlParams = new URLSearchParams(window.location.search);
 
@@ -131,6 +133,8 @@ const App = (): ReactElement => {
   return (
     <div>
       <div className="App-container">
+        <RememberScrollToggle />
+        <ScrollToTopButton />
         <AppAPIs />
         <AppInitializationAPIs />
         <AppInstallDialogAPIs />

apps/teams-test-app/src/components/RememberScrollToggle.tsx

@@ -0,0 +1,54 @@
+import throttle from 'lodash.throttle';
+import React, { useEffect, useState } from 'react';
+
+const RememberScrollToggle = () => {
+  // Initialize the toggle state from sessionStorage
+  const [isScrollFeatureActive, setIsScrollFeatureActive] = useState(
+    () => JSON.parse(sessionStorage.getItem('isScrollFeatureActive') || '{}') ?? true,
+  );
+
+  useEffect(() => {
+    // Save the toggle state to sessionStorage whenever it changes
+    sessionStorage.setItem('isScrollFeatureActive', JSON.stringify(isScrollFeatureActive));
+
+    console.log('scrolling');
+
+    if (!isScrollFeatureActive) {
+      return;
+    }
+
+    const handleScroll = throttle(() => {
+      const scrollPosition = window.scrollY;
+      sessionStorage.setItem('iframeScrollPosition', JSON.stringify(scrollPosition));
+      console.log('scrolling');
+    }, 2000);
+
+    window.addEventListener('scroll', handleScroll);
+
+    const savedScrollPosition = sessionStorage.getItem('iframeScrollPosition');
+    if (savedScrollPosition) {
+      setTimeout(() => {
+        window.scrollTo(0, JSON.parse(savedScrollPosition));
+      }, 100);
+    }
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [isScrollFeatureActive]);
+  return (
+    <div style={{ marginTop: '2em', marginLeft: '1em' }}>
+      <label>
+        remember scroll position
+        <input
+          type="checkbox"
+          checked={isScrollFeatureActive}
+          aria-label="remember scroll position"
+          onChange={(e) => setIsScrollFeatureActive(e.target.checked)}
+        />
+      </label>
+    </div>
+  );
+};
+
+export default RememberScrollToggle;

apps/teams-test-app/src/components/ScrollToTop.tsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react';
+
+const ScrollToTopButton = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  // Function to check scroll position and set visibility
+  const toggleVisibility = () => {
+    if (window.scrollY > 500) {
+      // Adjust 500 to the scroll position you deem appropriate
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  };
+
+  // Function to scroll to the top
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth', // Smooth scroll
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', toggleVisibility);
+
+    return () => {
+      window.removeEventListener('scroll', toggleVisibility);
+    };
+  }, []);
+
+  return (
+    <div>
+      {isVisible && (
+        <button
+          onClick={scrollToTop}
+          style={{
+            position: 'fixed',
+            top: '20px',
+            right: '20px',
+            height: '50px',
+            width: '50px',
+            fontSize: '25px',
+            zIndex: 1000,
+            cursor: 'pointer',
+            borderRadius: '50%',
+            border: 'none',
+            backgroundColor: '#3498db',
+            color: 'white',
+          }}
+        >
+          ↑
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default ScrollToTopButton;