diff --git a/README.md b/README.md
index 4d7f6e3..2fb57e7 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@
 
 > 暂未上线插件市场
 
-1. 下载[离线文件](https://github.com/flytam/utool-clipboard/releases/tag/1.0.0)，复制后打开 utool 进行安装
+1. 下载[离线文件](https://github.com/flytam/utool-clipboard/releases)，复制后打开 utool 进行安装
    ![](https://files.mdnice.com/user/8265/172f5f7b-d4b4-499a-a524-1fd1c89cef39.png)
 
 2. 通过 utool 进行调起
diff --git a/package.json b/package.json
index ede211c..8852361 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "axios": "^1.3.4",
     "clipboard-event": "^1.6.0",
     "dayjs": "^1.11.7",
+    "observe-element-in-viewport": "^0.0.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "vconsole": "^3.15.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5fd8602..b7ca1e3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,6 +18,7 @@ specifiers:
   electron: ^23.1.4
   fs-extra: ^11.1.0
   husky: ^8.0.0
+  observe-element-in-viewport: ^0.0.15
   postcss: ^8.4.21
   prettier: ^2.8.4
   pretty-quick: ^3.1.3
@@ -38,6 +39,7 @@ dependencies:
   axios: 1.3.4
   clipboard-event: 1.6.0
   dayjs: 1.11.7
+  observe-element-in-viewport: 0.0.15
   react: 18.2.0
   react-dom: 18.2.0_react@18.2.0
   vconsole: 3.15.0
@@ -1876,6 +1878,10 @@ packages:
     dev: true
     optional: true
 
+  /observe-element-in-viewport/0.0.15:
+    resolution: {integrity: sha512-BaJGtCHp8XXxe8zFOnsbv93f4SRLb0W5P3okGJkLLKC9IM9aXvpKF4C8lFxivcS5eROlNkhOCnUOSk4tUnJnKQ==}
+    dev: false
+
   /once/1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
     dependencies:
diff --git a/src/App.tsx b/src/App.tsx
index 4e12e99..637ea94 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,18 +1,13 @@
 import { useRef, useState } from "react";
-import {
-  Box,
-  Container,
-  createTheme,
-  IconButton,
-  ThemeProvider,
-} from "@mui/material";
+import { Container } from "@mui/material";
 import { FilterTab, filterTabList } from "./components/FilterTab";
 import { useClipboardData } from "./hooks/useClipboardData";
-import { ClipBoardList } from "./components/ClipBoardList";
+import { ClipBoardList, IClipboardRef } from "./components/ClipBoardList";
 import { ClipBoardDataType, copyToClipBoard, paste } from "./utils/clipboard";
 import { useKeyPress } from "ahooks";
 import { useThemeProvider } from "./hooks/useThemeProvider";
 import { Clear } from "./components/Clear";
+import { isInViewport } from "observe-element-in-viewport";
 
 function App() {
   const [clipBoardType, setClipBoard] = useState<{
@@ -31,22 +26,42 @@ function App() {
 
   const [activeIndexList, setActiveIndexList] = useState<number[]>([0]);
 
-  useKeyPress("uparrow", () =>
-    setActiveIndexList((pre) => [Math.max(pre[0] - 1, 0)])
-  );
+  useKeyPress("uparrow", async (e) => {
+    e.preventDefault();
+    setActiveIndexList((pre) => [Math.max(pre[0] - 1, 0)]);
+    const ele = clipboardRef.current?.getActiveItem();
+    if (
+      ele &&
+      !(await isInViewport(ele, {
+        modTop: "-150px",
+      }))
+    ) {
+      clipboardRef.current?.getActiveItem()?.scrollIntoView(true);
+    }
+  });
 
-  useKeyPress("downarrow", () =>
+  useKeyPress("downarrow", async (e) => {
+    e.preventDefault();
     setActiveIndexList((pre) => [
       Math.min(pre[0] + 1, clipBoardList.length - 1),
-    ])
-  );
+    ]);
+    const ele = clipboardRef.current?.getActiveItem();
+    if (
+      ele &&
+      !(await isInViewport(ele, {
+        modBottom: "-100px",
+      }))
+    ) {
+      clipboardRef.current?.getActiveItem()?.scrollIntoView(false);
+    }
+  });
 
   useKeyPress("enter", () => {
     copyToClipBoard(clipBoardList[activeIndexList[0]]);
     clearOne(clipBoardList[activeIndexList[0]].timestamp!);
     paste();
     setTimeout(() => setActiveIndexList([0]), 500);
-    listRef.current?.scrollTo(0, 0);
+    clipboardRef.current?.container?.scrollTo(0, 0);
   });
 
   useKeyPress("leftarrow", () => {
@@ -73,7 +88,7 @@ function App() {
     setActiveIndexList([0]);
   });
 
-  const listRef = useRef<HTMLUListElement | null>(null);
+  const clipboardRef = useRef<IClipboardRef | null>(null);
 
   return (
     <Provider>
@@ -96,7 +111,7 @@ function App() {
           }}
         />
         <ClipBoardList
-          ref={listRef}
+          ref={clipboardRef}
           clipBoardList={clipBoardList}
           activeIndexList={activeIndexList}
           onActiveChange={setActiveIndexList}
diff --git a/src/components/ClipBoardList.tsx b/src/components/ClipBoardList.tsx
index b769d6e..30df986 100644
--- a/src/components/ClipBoardList.tsx
+++ b/src/components/ClipBoardList.tsx
@@ -5,7 +5,7 @@ import {
   ListItemText,
   colors,
 } from "@mui/material";
-import { FC, forwardRef } from "react";
+import { FC, forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 import { ClipBoardData } from "../hooks/useClipboardData";
 import { timeAgo } from "../utils/format";
 import { ClipBoardItemContent } from "./ClipBoardItemContent";
@@ -16,19 +16,36 @@ interface IProps {
   onActiveChange: (list: number[]) => void;
 }
 
-export const ClipBoardList = forwardRef<HTMLUListElement, IProps>(
+export interface IClipboardRef {
+  container: HTMLUListElement | null;
+  getActiveItem: () => HTMLElement | null;
+}
+
+export const ClipBoardList = forwardRef<IClipboardRef, IProps>(
   ({ clipBoardList, activeIndexList, onActiveChange }, ref) => {
+    const containerRef = useRef<HTMLUListElement | null>(null);
+
+    useImperativeHandle(ref, () => ({
+      container: containerRef.current,
+      getActiveItem() {
+        return document.getElementById("clip-board-active");
+      },
+    }));
+
     return (
       <List
         sx={{
           overflowX: "auto",
         }}
-        ref={ref}
+        ref={(node) => (containerRef.current = node)}
       >
         {clipBoardList.map((x, index) => (
           <ListItem
             key={index}
             disablePadding
+            id={
+              activeIndexList.includes(index) ? "clip-board-active" : undefined
+            }
             sx={{
               border: `3px solid ${
                 activeIndexList.includes(index)