Element.scrollIntoView()
让当前的元素滚动到浏览器窗口的可视区域内
element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型参数
alignToTop： 一个Boolean值：
如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。
相应的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。
这是这个参数的默认值。
如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。
相应的scrollIntoViewOptions: {block: "end", inline: "nearest"}。
Document.elementFromPoint()
返回当前文档上处于指定坐标位置最顶层的元素,
坐标是相对于包含该文档的浏览器窗口的左上角为原点来计算的,
通常 x 和 y 坐标都应为正数.
demo：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> html, body { margin: 0; padding: 0; width: 100%; height: 100%; } ul, li { margin: 0; padding: 0; list-style-type: none; } .list-content { width: 100%; position: relative; font-size: 14px; } .sublist-alphabet { position: fixed; width: 14px; right: 14px; top: 28px; } .sublist-alphabet li { width: 14px; height: 14px; line-height: 14px; text-align: center; border-radius: 50%; margin: 5px 0; } .main-content li { width: 100%; margin: 10px; font-size: 16px; } .main-content li div { width: 100%; height: 20px; line-height: 20px; } .main-content li div ~ div { border-top: 1px solid red; } .sublist-alphabet .active { color: rgb(235, 17, 119); background-color: #ccc; } .main-content .active { background-color: aqua; } </style> </head> <body> <div class="list-content"> <!-- 字母表 --> <ul class="sublist-alphabet"> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> </ul> <!-- 内容列表 --> <ul class="main-content"> <li> <div>aaaaaaaaaaaaaaaaa1</div> <div>aaaaaaaaaaaaaaaaa2</div> <div>aaaaaaaaaaaaaaaaa3</div> <div>aaaaaaaaaaaaaaaaa1</div> <div>aaaaaaaaaaaaaaaaa2</div> <div>aaaaaaaaaaaaaaaaa3</div> <div>aaaaaaaaaaaaaaaaa1</div> <div>aaaaaaaaaaaaaaaaa2</div> <div>aaaaaaaaaaaaaaaaa3</div> <div>aaaaaaaaaaaaaaaaa1</div> <div>aaaaaaaaaaaaaaaaa2</div> <div>aaaaaaaaaaaaaaaaa3</div> <div>aaaaaaaaaaaaaaaaa1</div> <div>aaaaaaaaaaaaaaaaa2</div> <div>aaaaaaaaaaaaaaaaa3</div> <div>aaaaaaaaaaaaaaaaa1</div> <div>aaaaaaaaaaaaaaaaa2</div> <div>aaaaaaaaaaaaaaaaa3</div> <div>aaaaaaaaaaaaaaaaa1</div> <div>aaaaaaaaaaaaaaaaa2</div> <div>aaaaaaaaaaaaaaaaa3</div> <div>aaaaaaaaaaaaaaaaa1</div> <div>aaaaaaaaaaaaaaaaa2</div> <div>aaaaaaaaaaaaaaaaa3</div> <div>aaaaaaaaaaaaaaaaa1</div> <div>aaaaaaaaaaaaaaaaa2</div> <div>aaaaaaaaaaaaaaaaa3</div> </li> <li data-type="b"> <div>bbbbbbbbbbbbbbbbb1</div> <div>bbbbbbbbbbbbbbbbb2</div> <div>bbbbbbbbbbbbbbbbb3</div> <div>bbbbbbbbbbbbbbbbb1</div> <div>bbbbbbbbbbbbbbbbb2</div> <div>bbbbbbbbbbbbbbbbb3</div> <div>bbbbbbbbbbbbbbbbb1</div> <div>bbbbbbbbbbbbbbbbb2</div> <div>bbbbbbbbbbbbbbbbb3</div> <div>bbbbbbbbbbbbbbbbb1</div> <div>bbbbbbbbbbbbbbbbb2</div> <div>bbbbbbbbbbbbbbbbb3</div> <div>bbbbbbbbbbbbbbbbb1</div> <div>bbbbbbbbbbbbbbbbb2</div> <div>bbbbbbbbbbbbbbbbb3</div> <div>bbbbbbbbbbbbbbbbb1</div> <div>bbbbbbbbbbbbbbbbb2</div> <div>bbbbbbbbbbbbbbbbb3</div> </li> <li data-type="c"> <div>ccccccccccccccccc1</div> <div>ccccccccccccccccc2</div> <div>ccccccccccccccccc3</div> <div>ccccccccccccccccc1</div> <div>ccccccccccccccccc2</div> <div>ccccccccccccccccc3</div> <div>ccccccccccccccccc1</div> <div>ccccccccccccccccc2</div> <div>ccccccccccccccccc3</div> <div>ccccccccccccccccc1</div> <div>ccccccccccccccccc2</div> <div>ccccccccccccccccc3</div> <div>ccccccccccccccccc1</div> <div>ccccccccccccccccc2</div> <div>ccccccccccccccccc3</div> <div>ccccccccccccccccc1</div> <div>ccccccccccccccccc2</div> <div>ccccccccccccccccc3</div> </li> <li data-type="d"> <div>ddddddddddddddddd1</div> <div>ddddddddddddddddd2</div> <div>ddddddddddddddddd3</div> <div>ddddddddddddddddd1</div> <div>ddddddddddddddddd2</div> <div>ddddddddddddddddd3</div> <div>ddddddddddddddddd1</div> <div>ddddddddddddddddd2</div> <div>ddddddddddddddddd3</div> <div>ddddddddddddddddd1</div> <div>ddddddddddddddddd2</div> <div>ddddddddddddddddd3</div> <div>ddddddddddddddddd1</div> <div>ddddddddddddddddd2</div> <div>ddddddddddddddddd3</div> <div>ddddddddddddddddd1</div> <div>ddddddddddddddddd2</div> <div>ddddddddddddddddd3</div> </li> <li data-type="e"> <div>eeeeeeeeeeeeeeeee1</div> <div>eeeeeeeeeeeeeeeee2</div> <div>eeeeeeeeeeeeeeeee3</div> <div>eeeeeeeeeeeeeeeee1</div> <div>eeeeeeeeeeeeeeeee2</div> <div>eeeeeeeeeeeeeeeee3</div> <div>eeeeeeeeeeeeeeeee3</div> <div>eeeeeeeeeeeeeeeee3</div> <div>eeeeeeeeeeeeeeeee3</div> <div>eeeeeeeeeeeeeeeee3</div> <div>eeeeeeeeeeeeeeeee3</div> <div>eeeeeeeeeeeeeeeee3</div> <div>eeeeeeeeeeeeeeeee3</div> <div>eeeeeeeeeeeeeeeee3</div> </li> <li data-type="f"> <div>fffffffffffffffff1</div> <div>fffffffffffffffff2</div> <div>fffffffffffffffff3</div> <div>fffffffffffffffff3</div> <div>fffffffffffffffff3</div> <div>fffffffffffffffff3</div> <div>fffffffffffffffff3</div> <div>fffffffffffffffff3</div> <div>fffffffffffffffff3</div> <div>fffffffffffffffff3</div> </li> <li data-type="g"> <div>ggggggggggggggggg1</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg2</div> <div>ggggggggggggggggg3</div> </li> </ul> </div> <script> let list = document.querySelectorAll('.sublist-alphabet li') let contentList = document.querySelectorAll('.main-content li') list.forEach((item, index) => { list[index].onclick = () => { const lastIndex = sessionStorage.getItem('lastIndex') || '' if(lastIndex) { contentList[lastIndex].classList.remove('active') list[lastIndex].classList.remove('active') } contentList[index].scrollIntoView(true) contentList[index].classList.add('active') list[index].classList.add('active') sessionStorage.setItem('lastIndex', index) } }) </script> </body> </html>