开源项目 Smooth Scroll 使用教程

开源项目 Smooth Scroll 使用教程

smooth-scrollSmooth collection scrolling项目地址:https://gitcode.com/gh_mirrors/smoo/smooth-scroll

1. 项目的目录结构及介绍

Smooth Scroll 项目的目录结构如下：

smooth-scroll/
├── dist/
│   ├── smooth-scroll.min.js
│   └── smooth-scroll.polyfills.min.js
├── src/
│   ├── smooth-scroll.js
│   └── smooth-scroll.polyfills.js
├── .gitignore
├── .travis.yml
├── LICENSE
├── README.md
├── gulpfile.js
├── index.html
├── jump-to-top.html
├── package-lock.json
├── package.json
├── rollup.config.js
└── speed.html

目录介绍

• dist/：包含编译后的生产环境代码，包括 smooth-scroll.min.js 和 smooth-scroll.polyfills.min.js。
• src/：包含开发环境的源代码，包括 smooth-scroll.js 和 smooth-scroll.polyfills.js。
• .gitignore：Git 忽略文件配置。
• .travis.yml：Travis CI 配置文件。
• LICENSE：项目许可证。
• README.md：项目说明文档。
• gulpfile.js：Gulp 构建脚本。
• index.html：示例页面。
• jump-to-top.html：返回顶部示例页面。
• package-lock.json：NPM 锁定文件。
• package.json：NPM 配置文件。
• rollup.config.js：Rollup 配置文件。
• speed.html：速度测试示例页面。

2. 项目的启动文件介绍

Smooth Scroll 项目的启动文件主要是 dist/ 目录下的 smooth-scroll.min.js 和 smooth-scroll.polyfills.min.js。

启动文件介绍

• smooth-scroll.min.js：独立版本，不包含 polyfills。
• smooth-scroll.polyfills.min.js：包含 polyfills 的版本，支持 closest()、requestAnimationFrame() 和 CustomEvent()。

在 HTML 文件中引入启动文件：

<script src="dist/smooth-scroll.min.js"></script>

或

<script src="dist/smooth-scroll.polyfills.min.js"></script>

3. 项目的配置文件介绍

Smooth Scroll 项目的配置文件主要是 package.json 和 rollup.config.js。

配置文件介绍

• package.json：包含项目的元数据和依赖项。

{
  "name": "smooth-scroll",
  "version": "15.0.0",
  "description": "A lightweight script to animate scrolling to anchor links.",
  "main": "dist/smooth-scroll.polyfills.min.js",
  "scripts": {
    "build": "gulp build"
  },
  "dependencies": {},
  "devDependencies": {
    "gulp": "^4.0.2",
    "rollup": "^2.3.4"
  }
}

• rollup.config.js：Rollup 打包配置文件。

import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/smooth-scroll.js',
  output: {
    file: 'dist/smooth-scroll.min.js',
    format: 'iife',
    name: 'SmoothScroll',
    plugins: [terser()]
  }
};

通过这些配置文件，可以进行项目的构建和打包。

smooth-scrollSmooth collection scrolling项目地址:https://gitcode.com/gh_mirrors/smoo/smooth-scroll