首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript scroll-to.js页面平滑滚动

JavaScript使用scroll-to.js实现页面平滑滚动到指定位置

2026-03-04 08:37:42 作者：还是大剑师兰特

scroll-to.js是一个轻量级的JavaScript库,用于实现页面平滑滚动到指定位置的功能,它支持自定义动画时长、缓动效果等,本文给大家介绍了JavaScript如何使用scroll-to.js实现页面平滑滚动到指定位置,需要的朋友可以参考下

一、scroll-to.js 是什么

scroll-to.js 是一个轻量级的 JavaScript 库，专门用于实现页面平滑滚动到指定位置的功能，比原生 scrollTo 更易用，还支持自定义动画时长、缓动效果等。

二、安装/引入方式

1. npm 安装（推荐，适用于模块化项目）

# 安装核心库
npm install scroll-to --save
# 或 yarn
yarn add scroll-to

2. CDN 引入（适用于非模块化项目）

直接在 HTML 中引入：

<script src="https://unpkg.com/scroll-to@latest/dist/scroll-to.min.js"></script>

三、核心使用方法

1. 基础用法（模块化项目）

先导入库，再调用核心方法：

// 1. 导入 scroll-to
import scrollTo from 'scroll-to';

// 2. 基础使用：滚动到页面指定坐标（x: 0, y: 300）
scrollTo(0, 300, {
  duration: 500, // 滚动动画时长，单位ms（默认300ms）
  ease: 'out-circ' // 缓动效果（默认out-circ，可选：in-out-quart、linear等）
});

// 3. 滚动到指定DOM元素（更常用）
const targetElement = document.getElementById('target');
if (targetElement) {
  // 获取元素的顶部偏移量
  const top = targetElement.getBoundingClientRect().top + window.scrollY;
  scrollTo(0, top, { duration: 600 });
}

2. 非模块化项目（CDN引入）

直接全局调用 scrollTo 方法：

<button onclick="scrollToTarget()">滚动到底部</button>
<div id="bottom" style="margin-top: 1000px;">底部区域</div>

<script src="https://unpkg.com/scroll-to@latest/dist/scroll-to.min.js"></script>
<script>
function scrollToTarget() {
  const bottomElement = document.getElementById('bottom');
  const top = bottomElement.getBoundingClientRect().top + window.scrollY;
  // 全局调用 scrollTo
  scrollTo(0, top, {
    duration: 800,
    ease: 'linear' // 线性缓动（匀速滚动）
  });
}
</script>

3. 常用配置项说明

调用 scrollTo(x, y, options) 时，options 支持以下参数：

参数	类型	默认值	说明
duration	数字	300	动画时长（ms）
ease	字符串	out-circ	缓动效果（见下方可选值）
callback	函数	-	滚动完成后的回调函数

4. 常用缓动效果可选值

linear：匀速
in-circ：先慢后快
out-circ：先快后慢（推荐）
in-out-quart：先慢→快→慢

四、完整示例（模块化）

import scrollTo from 'scroll-to';

// 1. 滚动到页面顶部
function scrollToTop() {
  scrollTo(0, 0, {
    duration: 400,
    ease: 'out-circ',
    callback: () => {
      console.log('已滚动到顶部');
    }
  });
}

// 2. 滚动到指定ID的元素
function scrollToElement(id) {
  const el = document.getElementById(id);
  if (!el) return;
  
  // 计算元素相对于视口的顶部偏移 + 当前滚动距离
  const offsetTop = el.getBoundingClientRect().top + window.pageYOffset;
  scrollTo(0, offsetTop, { duration: 500 });
}

// 调用示例
document.querySelector('#to-top').addEventListener('click', scrollToTop);
document.querySelector('#to-section').addEventListener('click', () => {
  scrollToElement('section-1');
});

总结

scroll-to.js 核心是 scrollTo(x, y, options) 方法，用于平滑滚动到指定坐标；
实际开发中更常用“滚动到DOM元素”，需先通过 getBoundingClientRect() 获取元素偏移量；
关键配置：duration 控制动画时长，ease 控制滚动节奏，callback 处理滚动完成后的逻辑。

如果需要更复杂的场景（比如滚动到元素并偏移一定距离、滚动到指定容器内的元素），可以告诉我，我再补充对应的示例。

以上就是JavaScript使用scroll-to.js实现页面平滑滚动到指定位置的详细内容，更多关于JavaScript scroll-to.js页面平滑滚动的资料请关注脚本之家其它相关文章！