始め方

npmでのインストール（推奨）

$ npm install ue-scroll-js --save

またはYarn

$ yarn add ue-scroll-js

CDNを使用する場合

<link rel="stylesheet" href="//unpkg.com/ue-scroll-js@latest/dist/ue-scroll.min.css">
<script src="https://unpkg.com/ue-scroll-js"></script>

基本的な使用法

<html>
  <head>
    <!-- CSSとJSの読み込み -->
    <link rel="stylesheet" href="/path/to/ue-scroll-js/dist/ue-scroll.min.css">
    <script src="/path/to/ue-scroll-js/dist/ue-scroll.min.js"></script>
  </head>
  <body>
    <main>
      Your main contents
    </main>
    <!-- スクリプトの実行 -->
    <div id="ue-scroll" class="ue-scroll btn-white arrow-black circle shadow"></div>
    <script>
      UeScroll.init();
    </script>
  </body>
</html>

初期オプションを設定する場合

<!-- スクリプトの実行 -->
<div id="my-custom-id" class="ue-scroll btn-white arrow-black circle shadow"></div>
<script>
  UeScroll.init({
    element: '#my-custom-id',
    scrollSpeed: 10
  });
</script>

ES6モジュールでの使用

'use strict';
import ue from 'ue-scroll-js';
// スクリプトの実行
ue.init();

デフォルトでは、ue-scroll.jsは '＃ue-scroll' を持つ要素を自動的に検出します。DOMがレンダリングされた後に開始する必要があります。

オプション

キーデータ型初期値説明
elementString'#ue-scroll'対象要素をCSSセレクタで指定します。
positionNumber200ボタンが表示されるスクロール位置を指定します。
scrollSpeedNumber10スクロール速度を指定します（推奨20以下）
fadeSpeedNumber10フェードのスピードを指定します（推奨20以下）
cancelByScrollBooleantrueスクロールダウン時にスクロールをキャンセルします
（この設定はタッチデバイスでは無視されます）
cancelByClickBooleantrueウィンドウをクリック時にスクロールをキャンセルします。
cancelByKeydownBooleantrueいずれかのキーを押した時にスクロールをキャンセルします。

ボタンの色、デザイン、位置などはCSSで自由に変更できます。

使用例

円形

<div class="ue-scroll btn-white arrow-black circle"></div>
<div class="ue-scroll btn-gray arrow-white circle"></div>
<div class="ue-scroll btn-black arrow-white circle"></div>
<div class="ue-scroll btn-white arrow-black circle shadow"></div>

角丸四角形

<div class="ue-scroll btn-white arrow-black rounded-rectangle"></div>
<div class="ue-scroll btn-gray arrow-white rounded-rectangle"></div>
<div class="ue-scroll btn-black arrow-white rounded-rectangle"></div>
<div class="ue-scroll btn-white arrow-black rounded-rectangle shadow"></div>

四角形

<div class="ue-scroll btn-white arrow-black square"></div>
<div class="ue-scroll btn-gray arrow-white square"></div>
<div class="ue-scroll btn-black arrow-white square"></div>
<div class="ue-scroll btn-white arrow-black square shadow"></div>

カスタマイズ

<div class="ue-scroll arrow-white circle" style="background-color: #f69;"></div>
Go!
<div class="ue-scroll" style="width: auto; height: auto; padding: 10px; background-color: #fff; border: 1px solid #ccc; border-radius: 50%;">Go!</div>