https://inac-kobe.com/assets/script/front/jquery.crea.smoothscroll.js

1/*! このファイルはUTF-8のBOMなし(UTF-8N)で保存しています
2 *
3 * Smooth Scroll 1.0 - jQuery plugin
4 *
5 * Copyright 2016, CrEa Inc.
6 * http://www.creaman.com/
7 *
8 * Built for jQuery library
9 * http://jquery.com/
10 */
11;(function($, window, document, undefined) {
12    'use strict';
13
14    /**
15     * プラグイン名
16     *
17     * @var string
18     */
19    var pluginName = 'smoothscroll';
20
21    /**
22     * デフォルト設定
23     *
24     * @var object
25     */
26    var defaults = {
27        // カスタムデータ属性セレクタ(aタグに付与するdata-**という属性の**の部分)
28        dataSelector  : 'scroll',
29        // スクロール量の調整用マージン(この値の分だけ多くスクロールする)
30        margin        : 0,
31        // アニメーション時間
32        duration      : 500,
33        // イージング(デフォルトは "linear" または "swing" のみ指定可。その他の種類はjQuery Easing Pluginを読み込むことで指定可になる)
34        easing        : 'linear',
35        // URLハッシュを付けるかどうか
36        updateUrlHash : false,
37        // 固定ヘッダー
38        // ※セレクタ文字列かjQueryオブジェクトを指定
39        fixedHeader   : null,
40        // スクロール完了時のイベント
41        callback      : function(){}
42    };
43
44    /**
45     * 設定
46     *
47     * @var object
48     */
49    var settings;
50
51    /**
52     * コンストラクタ
53     */
54    function Plugin(element, options) {
55        this.element   = element;
56        this.settings  = $.extend({}, defaults, options);
57        this._defaults = defaults;
58        this._name     = pluginName;
59        this.init();
60    }
61
62    $.extend(Plugin.prototype, {
63        // 初期化
64        init: function(){
65            if (null != this.settings.fixedHeader) {
66                if (this.settings.fixedHeader instanceof jQuery) {
67                    this.settings.fixedHeader = this.settings.fixedHeader;
68                } else if ('string' === typeof this.settings.fixedHeader) {
69                    this.settings.fixedHeader = $(this.settings.fixedHeader);
70                } else {
71                    throw new TypeError("Argument 'fixedHeader' must be string or jQuery object.");
72                }
73            }
74            if ('undefined' === typeof $(this.element).data(this.settings.dataSelector)) {
75                return;
76            }
77
78            settings = this.settings;
79
80            var isEnabledHtmlScroll = this.isEnabledHtmlScroll;
81
82            var offset = null != this.settings.fixedHeader && 'undefined' != typeof this.settings.fixedHeader && 0 < this.settings.fixedHeader.size() ? this.settings.fixedHeader.outerHeight() : 0;
83            offset -= this.settings.margin;
84
85            $(this.element).on('click', function(){
86                // アンカーのターゲット要素が存在しない場合はhtml要素を指定
87                var target = $($(this).attr('href'));
88                if (0 >= target.size()) {
89                    target = $('html');
90                }
91
92                // スクロールポジションを取得
93                var position = target.offset().top;
94                position -= offset;
95
96                // スクロール実行
97                $(isEnabledHtmlScroll ? 'html' : 'body').animate({
98                    scrollTop: position
99                }, settings.duration, settings.easing, settings.callback);
100
101                if (! settings.updateUrlHash) {
102                    return false;
103                }
104            });
105        },
106        // HTML要素のスクロールが可能かどうかを返す
107        isEnabledHtmlScroll: (function(){
108            var html = $('html'), top = html.scrollTop();
109            var top  = html.scrollTop();
110            var element = $('<div/>').height(10000).prependTo('body');
111            html.scrollTop(10000);
112            var result = !! html.scrollTop();
113            html.scrollTop(top);
114            element.remove();
115            return result;
116        })()
117    });
118
119    $.fn[pluginName] = function(options) {
120        return this.each(function(){
121            if (! $.data(this, 'plugin_' + pluginName)) {
122                $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
123            }
124        });
125    };
126}(jQuery, window, document));