Title: Scroll Indicator
Author: Derek Hanson
Published: <strong>2026 年 9 月 14 日</strong>
Last modified: 2026 年 9 月 14 日

---

搜尋外掛

![](https://ps.w.org/scroll-indicator/assets/banner-772x250.png?rev=3695697)

![](https://ps.w.org/scroll-indicator/assets/icon-256x256.png?rev=3695697)

# Scroll Indicator

 由 [Derek Hanson](https://profiles.wordpress.org/dhansondesigns/) 開發

[下載](https://downloads.wordpress.org/plugin/scroll-indicator.1.0.2.zip)

[即時預覽](https://tw.wordpress.org/plugins/scroll-indicator/?preview=1)

 * [詳細資料](https://tw.wordpress.org/plugins/scroll-indicator/#description)
 * [使用者評論](https://tw.wordpress.org/plugins/scroll-indicator/#reviews)
 *  [安裝方式](https://tw.wordpress.org/plugins/scroll-indicator/#installation)
 * [開發資訊](https://tw.wordpress.org/plugins/scroll-indicator/#developers)

 [技術支援](https://wordpress.org/support/plugin/scroll-indicator/)

## 外掛說明

Scroll Indicator adds a focused block for landing pages, hero sections, editorial
layouts, and long-form content. It gives visitors a clear visual cue that there 
is more to explore below the fold.

Choose from multiple icon styles, adjust the size, use native WordPress text color
controls, add optional helper text, and let visitors click or keyboard-activate 
the indicator to move smoothly down the page.

The block is intentionally lightweight. Animations are handled with CSS, respect
reduced-motion preferences, and the front-end script is limited to click-to-scroll
and automatic hide-on-scroll behavior.

#### Key Features

 * Five icon styles: mouse, arrow, chevron, dots, and hand.
 * Preset sizes plus a custom CSS size value.
 * Native block editor controls for text color, spacing, typography, and alignment.
 * Fixed screen positioning and draggable absolute positioning for hero-style sections.
 * CSS-only animation that respects the visitor’s reduced-motion preference.
 * Optional text label beneath the icon.
 * Automatic hide-on-scroll behavior.
 * Keyboard-accessible click-to-scroll interaction.
 * No animation libraries or heavy runtime dependencies.

#### Development

The human-readable source for the compiled JavaScript and CSS is included in this
plugin package under `src/`.

The generated files in `compiled/` are built from `src/index.js`, `src/view.js`,
and the SCSS files in `src/` using `@wordpress/scripts`. To rebuild them, run:

 1. `npm install`
 2. `npm run build`

The public source repository is maintained at https://github.com/dhanson-wp/scroll-
indicator.

#### Good For

 * Landing page hero sections.
 * Editorial introductions.
 * Long-form stories and portfolios.
 * Product pages where visitors should continue below the fold.
 * Any layout that needs a subtle, branded scroll cue.

## 螢幕擷圖

[⌊The block on a full-height hero, animating and inviting the visitor down the page.⌉⌊
The block on a full-height hero, animating and inviting the visitor down the page
.⌉[

The block on a full-height hero, animating and inviting the visitor down the page.

[⌊Five icon styles: mouse, arrow, chevron, dots, and hand.⌉⌊Five icon styles: mouse,
arrow, chevron, dots, and hand.⌉[

Five icon styles: mouse, arrow, chevron, dots, and hand.

[⌊Four preset sizes plus any custom CSS size.⌉⌊Four preset sizes plus any custom
CSS size.⌉[

Four preset sizes plus any custom CSS size.

[⌊Icons and labels follow the block's text color and support custom text.⌉⌊Icons
and labels follow the block's text color and support custom text.⌉[

Icons and labels follow the block’s text color and support custom text.

[⌊Absolute positioning pins the indicator anywhere inside a Cover or Group.⌉⌊Absolute
positioning pins the indicator anywhere inside a Cover or Group.⌉[

Absolute positioning pins the indicator anywhere inside a Cover or Group.

[⌊Accessible by default: a real button, reduced-motion aware, keyboard friendly.⌉⌊
Accessible by default: a real button, reduced-motion aware, keyboard friendly.⌉[

Accessible by default: a real button, reduced-motion aware, keyboard friendly.

[⌊Block settings in the editor sidebar: icon type, size, label, and position.⌉⌊Block
settings in the editor sidebar: icon type, size, label, and position.⌉[

Block settings in the editor sidebar: icon type, size, label, and position.

[⌊Finding the block in the inserter.⌉⌊Finding the block in the inserter.⌉[

Finding the block in the inserter.

## 適用於區塊編輯器

這個外掛提供 1 個可供區塊編輯器使用的區塊。

 *   Scroll Indicator An animated scroll indicator with multiple icon styles that
   encourages users to scroll down the page.

## 安裝方式

 1. Upload the `scroll-indicator` folder to the `/wp-content/plugins/` directory, or
    install it through the WordPress Plugins screen.
 2. Activate the plugin through the Plugins screen in WordPress.
 3. Open the block editor and add the Scroll Indicator block.
 4. Choose an icon style, size, color, and optional label.

## 常見問題集

### Does this plugin require a JavaScript animation library?

No. Animations are handled with CSS. The front-end script only powers click-to-scroll
and automatic hide-on-scroll behavior.

### Can I change the icon color?

Yes. The block uses WordPress core text color support, so colors can be managed 
through the block editor.

### Does it support reduced motion preferences?

Yes. The animated effects only run when the visitor has not requested reduced motion.

### Is the indicator keyboard accessible?

Yes. The front-end indicator is saved as a keyboard-focusable button-like control
with an accessible label.

### Will the block work without JavaScript?

The icon and optional text still render without JavaScript. JavaScript is only needed
for click-to-scroll and automatic hide-on-scroll behavior.

## 使用者評論

這個外掛目前沒有任何使用者評論。

## 參與者及開發者

以下人員參與了開源軟體〈Scroll Indicator〉的開發相關工作。

參與者

 *   [ Derek Hanson ](https://profiles.wordpress.org/dhansondesigns/)

[將〈Scroll Indicator〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/scroll-indicator)

### 對開發相關資訊感興趣？

任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/scroll-indicator/)、
查看 [SVN 存放庫](https://plugins.svn.wordpress.org/scroll-indicator/)，或透過 [RSS](https://plugins.trac.wordpress.org/log/scroll-indicator/?limit=100&mode=stop_on_copy&format=rss)
訂閱[開發記錄](https://plugins.trac.wordpress.org/log/scroll-indicator/)。

## 變更記錄

#### 1.0.2

 * Register the five icons with the WordPress 7.1 Icons API so they can be reused
   in the core Icon block.
 * Add screenshots and a WordPress Playground blueprint with a demo page for the
   plugin directory’s live preview.

#### 1.0.1

 * Add the WordPress.org owner username to the contributors list.
 * Include and document the human-readable source for compiled JavaScript and CSS.
 * Prepare the plugin for WordPress.org submission with packaged compiled assets,
   cleaner repository hygiene, and improved editor positioning controls.
 * Improve accessibility with a real button element, reduced-motion-aware scrolling,
   and automatic hide-on-scroll behavior.
 * Add WordPress 7.0 testing metadata.

#### 1.0.0

 * Initial release.

## 中繼資料

 *  版本 **1.0.2**
 *  最後更新 **2 天前**
 *  啟用安裝數 **少於 10 次**
 *  WordPress 版本需求 ** 6.4 或更新版本 **
 *  已測試相容的 WordPress 版本 **7.0.4**
 *  PHP 版本需求 ** 7.4 或更新版本 **
 *  語言
 * [English (US)](https://wordpress.org/plugins/scroll-indicator/)
 * 標籤:
 * [animation](https://tw.wordpress.org/plugins/tags/animation/)[block](https://tw.wordpress.org/plugins/tags/block/)
   [gutenberg](https://tw.wordpress.org/plugins/tags/gutenberg/)[indicator](https://tw.wordpress.org/plugins/tags/indicator/)
   [scroll](https://tw.wordpress.org/plugins/tags/scroll/)
 *  [進階檢視](https://tw.wordpress.org/plugins/scroll-indicator/advanced/)

## 評分

這個項目尚無任何評論記錄。

[撰寫評分](https://wordpress.org/support/plugin/scroll-indicator/reviews/#new-post)

[查看全部使用者評論](https://wordpress.org/support/plugin/scroll-indicator/reviews/)

## 參與者

 *   [ Derek Hanson ](https://profiles.wordpress.org/dhansondesigns/)

## 技術支援

使用者可在技術支援論壇提出意見反應或使用問題。

 [檢視技術支援論壇](https://wordpress.org/support/plugin/scroll-indicator/)