add scroll to top button

src/components/scrollButton/ScrollButton.jsx

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import styles from './ScrollButton.module.css';
+
+class ScrollButton extends Component {
+  componentDidMount() {
+    window.addEventListener('scroll', this.scrollFunction);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.scrollFunction);
+  }
+
+  scrollFunction = () => {
+    const mybutton = document.getElementById('btn-back-to-top');
+    if (
+      document.body.scrollTop > 20 ||
+      document.documentElement.scrollTop > 20
+    ) {
+      mybutton.style.display = 'block';
+    } else {
+      mybutton.style.display = 'none';
+    }
+  };
+
+  backToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  render() {
+    return (
+      <button
+        id="btn-back-to-top"
+        className={styles.ScrollButton}
+        onClick={this.backToTop}
+      >
+        Scroll to Top
+      </button>
+    );
+  }
+}
+
+export default ScrollButton;

src/components/scrollButton/ScrollButton.module.css

@@ -0,0 +1,23 @@
+.ScrollButton {
+  display: none;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  cursor: pointer;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  font-size: 16px;
+  padding: 8px 12px;
+  transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+.ScrollButton:hover {
+  background-color: #0056b3;
+  transform: scale(1.05);
+}
+
+.ScrollButton:active {
+  transform: scale(0.95);
+}

src/components/sharedLayout/SharedLayout.jsx

@@ -1,6 +1,7 @@
 import React, { Suspense } from 'react';
 import { Outlet, Link, useLocation } from 'react-router-dom';
 import styles from './SharedLayout.module.css';
+import ScrollButton from 'components/scrollButton/ScrollButton';
 
 const SharedLayout = () => {
   const location = useLocation();
@@ -30,6 +31,7 @@ const SharedLayout = () => {
       <Suspense fallback={<div>Loading...</div>}>
         <Outlet />
       </Suspense>
+      <ScrollButton />
     </div>
   );
 };

src/pages/Home.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import MovieList from '../components/MovieList/MovieList';
+import MovieList from '../components/movieList/MovieList';
 import { fetchTrendingMovies } from '../services/api';
 import Loader from '../components/Loader';
 

src/pages/Movies.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { handleSearch } from '../services/api';
 import { SearchForm } from '../components/searchForm/SearchForm';
-import MovieList from '../components/MovieList/MovieList';
+import MovieList from '../components/movieList/MovieList';
 import Loader from '../components/Loader';
 
 const Movies = () => {