React Js Scroll to Element

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="text/babel">
    const { useState, useRef } = React
    function App() {
      const [itemsToShow, setItemsToShow] = useState(5);
      const [items, setItems] = useState(['Laptop', 'Mobile', 'Backpack', 'Sunglasses', 'Water bottle', 'Headphones', 'Wallet', 'Umbrella', 'Notebook', 'Pen', 'Charger', 'Watch', 'Socks', 'Shoes', 'Jacket', 'Hat', 'Gloves', 'Towel', 'Sunscreen', 'Snacks', 'Map', 'First aid kit', 'Camera', 'Toothbrush', 'Toothpaste', 'Shampoo', 'Conditioner', 'Soap', 'Tissues', 'Hand sanitizer', 'Passport', 'Travel pillow', 'Blanket', 'Earplugs', 'Phone charger', 'Power bank', 'Sunglasses case', 'ID card', 'Cash', 'Credit cards', 'Earbuds', 'Lip balm', 'Hairbrush', 'Hair ties', 'Deodorant', 'Medications', 'Insect repellent'])

const newItemRef = useRef(null);

const scrollToLastItem = () => {
        if (newItemRef.current) {
          newItemRef.current.scrollIntoView({ behavior: 'smooth' });
        }
      };

const incrementItemsToShow = () => {
        setItemsToShow(itemsToShow + 1);
      };

return (
        <div className='container'>
          <div className='fixed-buttons'>
            <button onClick={scrollToLastItem}>Scroll to Last Item</button>
            <button onClick={incrementItemsToShow}>Show More Items</button>
          </div>
          <ul>
            {items.slice(0, itemsToShow).map((item, index) => (
              <li key={index} ref={index === itemsToShow - 1 ? newItemRef : null}>
                {item}
              </li>
            ))}
          </ul>
        </div>
      );
    }
    ReactDOM.render(<App />, document.getElementById("app"));
  </script>
  <style>
    * {
      box-sizing: border-box;
    }

.container {
      margin: 0 auto;
      width: 600px;
      text-align: center;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
      padding: 20px;
      position: relative;
    }

.fixed-buttons {
      position: fixed;
      top: 0;
      margin-bottom: px;
      padding: 10px;
      /* Add padding to space the buttons */
    }

/* Buttons */
    button {
      background-color: #007BFF;
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 10px 20px;
      margin: 5px;
      cursor: pointer;
      font-size: 16px;
      transition: background-color 0.3s ease;
    }

button:hover {
      background-color: #0056b3;
    }

/* List */
    ul {
      list-style-type: none;
      padding: 0;
    }

li {
      border: 1px solid #ddd;
      padding: 10px;
      margin: 25px 0;
      background-color: #f9f9f9;
      border-radius: 4px;
      font-size: 18px;
    }

/* Scroll Animation (Optional) */
    @keyframes scrollAnimation {
      0% {
        transform: translateY(-20px);
      }

100% {
        transform: translateY(0);
      }
    }

/* Apply the animation to the last item when scrolling */
    li:last-child {
      animation: scrollAnimation 0.5s ease;
    }
  </style>
</body>

</html>

 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="text/babel">
    const { useState, useRef } = React
    function App() {
      const [itemsToShow, setItemsToShow] = useState(5);
      const [items, setItems] = useState(['Laptop', 'Mobile', 'Backpack', 'Sunglasses', 'Water bottle', 'Headphones', 'Wallet', 'Umbrella', 'Notebook', 'Pen', 'Charger', 'Watch', 'Socks', 'Shoes', 'Jacket', 'Hat', 'Gloves', 'Towel', 'Sunscreen', 'Snacks', 'Map', 'First aid kit', 'Camera', 'Toothbrush', 'Toothpaste', 'Shampoo', 'Conditioner', 'Soap', 'Tissues', 'Hand sanitizer', 'Passport', 'Travel pillow', 'Blanket', 'Earplugs', 'Phone charger', 'Power bank', 'Sunglasses case', 'ID card', 'Cash', 'Credit cards', 'Earbuds', 'Lip balm', 'Hairbrush', 'Hair ties', 'Deodorant', 'Medications', 'Insect repellent'])
​
      const newItemRef = useRef(null);
​
      const scrollToLastItem = () => {
        if (newItemRef.current) {
          newItemRef.current.scrollIntoView({ behavior: 'smooth' });
        }
      };
​
      const incrementItemsToShow = () => {
        setItemsToShow(itemsToShow + 1);
      };
​
      return (
        <div className='container'>
          <div className='fixed-buttons'>
            <button onClick={scrollToLastItem}>Scroll to Last Item</button>
            <button onClick={incrementItemsToShow}>Show More Items</button>
          </div>
          <ul>
            {items.slice(0, itemsToShow).map((item, index) => (
              <li key={index} ref={index === itemsToShow - 1 ? newItemRef : null}>
                {item}
              </li>
            ))}
          </ul>
        </div>
      );
    }
    ReactDOM.render(<App />, document.getElementById("app"));
  </script>
  <style>
    * {
      box-sizing: border-box;
    }
​
    .container {
      margin: 0 auto;
      width: 600px;
      text-align: center;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
      padding: 20px;
      position: relative;
    }
​
    .fixed-buttons {
      position: fixed;
      top: 0;
      margin-bottom: px;
      padding: 10px;
      /* Add padding to space the buttons */
    }
​
    /* Buttons */
    button {
      background-color: #007BFF;
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 10px 20px;
      margin: 5px;
      cursor: pointer;
      font-size: 16px;
      transition: background-color 0.3s ease;
    }
​
    button:hover {
      background-color: #0056b3;
    }
​
    /* List */
    ul {
      list-style-type: none;
      padding: 0;
    }
​
    li {
      border: 1px solid #ddd;
      padding: 10px;
      margin: 25px 0;
      background-color: #f9f9f9;
      border-radius: 4px;
      font-size: 18px;
    }
​
    /* Scroll Animation (Optional) */
    @keyframes scrollAnimation {
      0% {
        transform: translateY(-20px);
      }
​
      100% {
        transform: translateY(0);
      }
    }
​
    /* Apply the animation to the last item when scrolling */
    li:last-child {
      animation: scrollAnimation 0.5s ease;
    }
  </style>
</body>
​
</html>