---
layout: page
title: インストールと設定
permalink: /install-and-settings/
---

<h2>インストール</h2>

<p>任意の場所に､Githubよりリポジトリをクローン､またはZIPをダウンロードし解凍します｡</p>
<p><a class="btn btn--primary" href="https://github.com/ejointjp/smooziee.js/">Github</a></p>

<p><code>smooziee.js</code> を jQueryの後に読み込みます。</p>

{% highlight html %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="path/to/smooziee.js"></script>
{% endhighlight %}

<p><code>smooziee</code> を実行します。</p>

{% highlight js %}
$(function()){
  $.smooziee();
});
{% endhighlight %}

<h2>オプション</h2>

<p>オプションについては以下のとおりです。</p>

{% highlight js %}
$(function()){
  $.smooziee({
    ignore: '.no-scroll', // スクロールを除外するクラス
    offset: -20, // 移動先のオフセット
    otherPageScroll: true, // 他ページへのリンクの際のスクロール
    scrollKey: 'scroll_id', // ハッシュタグの代わりに使用するクエリのキー
    speed: 1000, // スクロール開始から終了までの時間
    urlHistory: 'replace', // URL書き換え時にhistoryを追加するか上書きするか
    urlParam: 'hash' // URLの書き換え hash, none, default
  });
});
{% endhighlight %}

<table class="table table--bordered table--striped table--responsive">

<tbody>
  <tr>
    <th>ignore</th>
    <td>cssのセレクタ（クラス名）</td>
    <td>指定したクラス名がついたaタグをクリックしてもスムーススクロールが発生しません。</td>
  </tr>
  <tr>
    <th>offset</th>
    <td>int</td>
    <td>ターゲット要素のY座標にこの値を足したY座標へスクロールします。</td>
  </tr>
  <tr>
    <th>otherPageScroll</th>
    <td>bool</td>
    <td>サイト内の他ページへリンクした際のスムーススクロールを有効・無効にする</td>
  </tr>
  <tr>
    <th>scrollKey</th>
    <td>string</td>
    <td>他ページへのリンクの際に、ハッシュタグに代わって使われるクエリのキーです。デフォルトでは、 <code>http://example.com/#link</code> へのリンクは <code>http://example.com/?scroll_id=link</code> に変換されます。</td>
  </tr>
  <tr>
    <th>speed</th>
    <td>int</td>
    <td>スクロール開始から終了までの時間（ms）</td>
  </tr>
  <tr>
    <th>urlHistory</th>
    <td>string （'replace', 'push'）</td>
    <td>
      <p>URLの書き換えが発生したときに、URLの履歴（History（をどう扱うか指定します。</p>
      <dl>
        <dt><code>replace</code></dt>
        <dd>書き換え前の履歴を現在の履歴で上書きします。</dd>
        <dt><code>push</code></dt>
        <dd>書き換え前の履歴の後に、現在の履歴を追加します。</dd>
      </dl>
    </td>
  </tr>
  <tr>
    <th>urlParam</th>
    <td>string （'hash', 'none', 'default'）</td>
    <td>
      <p>ハッシュタグのついたaタグをクリックした時に、URLをどう書き換えるかを指定します。</p>
      <dl>
        <dt><code>hash</code></dt>
        <dd>通常のページ内リンクと同じくハッシュタグを付与します。<code>http://example.com/#link</code></dd>
        <dt><code>none</code></dt>
        <dd>ページ内リンクを行っても、ハッシュタグを付与しません。<code>http://example.com</code></dd>
        <dt><code>default</code></dt>
        <dd>他ページへのリンクをした際にはハッシュタグが変換されますが、変換されたそのままの状態でアドレスバーに表示されます。<code>http://example.com/?scroll_id=link</code></dd>
        <dd>また、ページ内リンクの際は何も付与しません。</dd>
      </dl>
    </td>
  </tr>
</tbody>
</table>