<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } body { margin: 0 auto; padding: 50px; background: #E2E2E2; } p { font-size: 15px; background: #797979; padding: 10px; border-radius: 5px; line-height: 2; text-align: center; } .flex-container { display: flex; flex-flow: row wrap; margin-top: 20px; } .flex-item { width: 100%; height: 500px; overflow: auto; } .flex-item li { list-style-type: none; width: 100%; height: 100px; background: #ffd200; margin: 5px 0; color: white; font-size: 30px; line-height: 100px; text-align: center; } </style> </head> <body> <div> <p>hi, 滾動指定的li到ul的頂部</p> <div class="flex-container"> <ul class="flex-item" id="ul"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> </ul> </div> </div> <script type="text/javascript"> function scrollToByIndex(index) { let parentDom = ul let ch = parentDom.children let currentLi = ch[index] let top = ch[0].offsetTop if (currentLi) { parentDom.scrollTop = currentLi.offsetTop - top } } scrollToByIndex(2) function getIndexFormArr(arr, num) { return arr.findIndex(function(item) { return item === num }) } </script> </body> </html>