平滑滚动

最新推荐文章于 2026-03-04 00:25:37 发布

原创最新推荐文章于 2026-03-04 00:25:37 发布 · 979 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #html5

前端同时被 2 个专栏收录

9 篇文章

订阅专栏

JavaScript

9 篇文章

订阅专栏

本文介绍如何使用scrollTo方法实现网页元素的平滑滚动，包括直接指定坐标和使用ScrollToOptions对象进行滚动行为设置的方法。

使界面平滑滚动到给定元素的指定坐标位置,可以使用scrollTo方法

语法

element.scrollTo(x-coord, y-coord)
// OR
element.scrollTo(options)

element指的是DOM节点元素,可以是windows,也可以通过document.getElementByxxx获取的节点

传入两个参数

参数	x-coord	y-coord
含义	沿x轴滚动的距离	沿y轴滚动的距离

传入options参数

传入的options参数是一个ScrollToOptions对象,ScrollToOptions有三个属性,分别为top, left, behavior

属性	top	left	behavior
含义	沿y轴滚动的距离	沿x轴滚动的距离	滚动的方式,平滑滚动或者立即滚动到指定位置

ScrollToOptions的behavior有三个值,分别为smooth, auto, instant

属性	smooth	auto	instant
含义	平滑滚动	立即跳动到指定位置	立即跳动到指定位置,同auto

案例

element.scrollTo(x-coord, y-coord)的使用

这里的ELement可以是Windows

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div {
            width: 1600px;
            height: 2000px;
            background-color: #8aff1c;
        }
    </style>
</head>
<body>
<button id="btn">滚动</button>
<div class="div">
    <p>x-coord 是期望滚动到位置水平轴上距元素左上角的像素。
        y-coord 是期望滚动到位置竖直轴上距元素左上角的像素。</p>
    <p>x-coord 是期望滚动到位置水平轴上距元素左上角的像素。
        y-coord 是期望滚动到位置竖直轴上距元素左上角的像素。</p>
    <p>x-coord 是期望滚动到位置水平轴上距元素左上角的像素。
        y-coord 是期望滚动到位置竖直轴上距元素左上角的像素。</p>
    <p>x-coord 是期望滚动到位置水平轴上距元素左上角的像素。
        y-coord 是期望滚动到位置竖直轴上距元素左上角的像素。</p>
    <p>x-coord 是期望滚动到位置水平轴上距元素左上角的像素。
        y-coord 是期望滚动到位置竖直轴上距元素左上角的像素。</p>
</div>
<script>
let button = document.getElementById(`btn`);
button.addEventListener('click', () => {
    window.scrollTo(50, 50)
})
</script>
</body>
</html>

element.scrollTo(options)的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div {
            width: 300px;
            height: 300px;
            background-color: #8aff1c;
            overflow: auto;
        }
    </style>
</head>
<body>
<button id="btn">滚动</button>
<div class="div">
    <p>options 是一个ScrollToOptions对象。</p>
    <p>options 是一个ScrollToOptions对象。</p>
    <p>options 是一个ScrollToOptions对象。</p>
    <p>options 是一个ScrollToOptions对象。</p>
    <p>options 是一个ScrollToOptions对象。</p>
    <p>options 是一个ScrollToOptions对象。</p>
    <p>options 是一个ScrollToOptions对象。</p>
    <p>options 是一个ScrollToOptions对象。</p>
    <p>options 是一个ScrollToOptions对象。</p>
    <p>options 是一个ScrollToOptions对象。</p>
    <p>options 是一个ScrollToOptions对象。</p>
</div>
<script>
const button = document.getElementById(`btn`);
button.addEventListener('click', () => {
    const div = document.getElementsByClassName('div')[0]
    div.scrollTo({
        top: 150,
        behavior: 'smooth'
    })
})
</script>
</body>
</html>

参考文章:

Element.scrollTo()

ScrollToOptions