https://www.mitsubishielectric.co.jp/corporate/randd/common/js/jquery.smooth-scroll.js

1
2/*!
3 * jQuery Smooth Scroll - v1.7.2 - 2016-01-23
4 * https://github.com/kswedberg/jquery-smooth-scroll
5 * Copyright (c) 2016 Karl Swedberg
6 * Licensed MIT
7 */
8
9(function(factory) {
10  if (typeof define === 'function' && define.amd) {
11    // AMD. Register as an anonymous module.
12    define(['jquery'], factory);
13  } else if (typeof module === 'object' && module.exports) {
14    // CommonJS
15    factory(require('jquery'));
16  } else {
17    // Browser globals
18    factory(jQuery);
19  }
20}(function($) {
21
22  var version = '1.7.2';
23  var optionOverrides = {};
24  var defaults = {
25    exclude: [],
26    excludeWithin: [],
27    offset: 0,
28
29    // one of 'top' or 'left'
30    direction: 'top',
31
32    // if set, bind click events through delegation
33    //  supported since jQuery 1.4.2
34    delegateSelector: null,
35
36    // jQuery set of elements you wish to scroll (for $.smoothScroll).
37    //  if null (default), $('html, body').firstScrollable() is used.
38    scrollElement: null,
39
40    // only use if you want to override default behavior
41    scrollTarget: null,
42
43    // fn(opts) function to be called before scrolling occurs.
44    // `this` is the element(s) being scrolled
45    beforeScroll: function() {},
46
47    // fn(opts) function to be called after scrolling occurs.
48    // `this` is the triggering element
49    afterScroll: function() {},
50    easing: 'swing',
51    speed: 400,
52
53    // coefficient for "auto" speed
54    autoCoefficient: 2,
55
56    // $.fn.smoothScroll only: whether to prevent the default click action
57    preventDefault: true
58  };
59
60  var getScrollable = function(opts) {
61    var scrollable = [];
62    var scrolled = false;
63    var dir = opts.dir && opts.dir === 'left' ? 'scrollLeft' : 'scrollTop';
64
65    this.each(function() {
66      var el = $(this);
67
68      if (this === document || this === window) {
69        return;
70      }
71
72      if (document.scrollingElement && (this === document.documentElement || this === document.body)) {
73        scrollable.push(document.scrollingElement);
74
75        return false;
76      }
77
78      if (el[dir]() > 0) {
79        scrollable.push(this);
80      } else {
81        // if scroll(Top|Left) === 0, nudge the element 1px and see if it moves
82        el[dir](1);
83        scrolled = el[dir]() > 0;
84
85        if (scrolled) {
86          scrollable.push(this);
87        }
88        // then put it back, of course
89        el[dir](0);
90      }
91    });
92
93    if (!scrollable.length) {
94      this.each(function() {
95        // If no scrollable elements and <html> has scroll-behavior:smooth because
96        // "When this property is specified on the root element, it applies to the viewport instead."
97        // and "The scroll-behavior property of the … body element is *not* propagated to the viewport."
98        // → https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior
99        if (this === document.documentElement && $(this).css('scrollBehavior') === 'smooth') {
100          scrollable = [this];
101        }
102
103        // If still no scrollable elements, fall back to <body>,
104        // if it's in the jQuery collection
105        // (doing this because Safari sets scrollTop async,
106        // so can't set it to 1 and immediately get the value.)
107        if (!scrollable.length && this.nodeName === 'BODY') {
108          scrollable = [this];
109        }
110      });
111    }
112
113    // Use the first scrollable element if we're calling firstScrollable()
114    if (opts.el === 'first' && scrollable.length > 1) {
115      scrollable = [scrollable[0]];
116    }
117
118    return scrollable;
119  };
120
121  $.fn.extend({
122    scrollable: function(dir) {
123      var scrl = getScrollable.call(this, {dir: dir});
124
125      return this.pushStack(scrl);
126    },
127    firstScrollable: function(dir) {
128      var scrl = getScrollable.call(this, {el: 'first', dir: dir});
129
130      return this.pushStack(scrl);
131    },
132
133    smoothScroll: function(options, extra) {
134      options = options || {};
135
136      if (options === 'options') {
137        if (!extra) {
138          return this.first().data('ssOpts');
139        }
140
141        return this.each(function() {
142          var $this = $(this);
143          var opts = $.extend($this.data('ssOpts') || {}, extra);
144
145          $(this).data('ssOpts', opts);
146        });
147      }
148
149      var opts = $.extend({}, $.fn.smoothScroll.defaults, options);
150
151      var clickHandler = function(event) {
152        var escapeSelector = function(str) {
153          return str.replace(/(:|\.|\/)/g, '\\$1');
154        };
155
156        var link = this;
157        var $link = $(this);
158        var thisOpts = $.extend({}, opts, $link.data('ssOpts') || {});
159        var exclude = opts.exclude;
160        var excludeWithin = thisOpts.excludeWithin;
161        var elCounter = 0;
162        var ewlCounter = 0;
163        var include = true;
164        var clickOpts = {};
165        var locationPath = $.smoothScroll.filterPath(location.pathname);
166        var linkPath = $.smoothScroll.filterPath(link.pathname);
167        var hostMatch = location.hostname === link.hostname || !link.hostname;
168        var pathMatch = thisOpts.scrollTarget || (linkPath === locationPath);
169        var thisHash = escapeSelector(link.hash);
170
171        if (thisHash && !$(thisHash).length) {
172          include = false;
173        }
174
175        if (!thisOpts.scrollTarget && (!hostMatch || !pathMatch || !thisHash)) {
176          include = false;
177        } else {
178          while (include && elCounter < exclude.length) {
179            if ($link.is(escapeSelector(exclude[elCounter++]))) {
180              include = false;
181            }
182          }
183
184          while (include && ewlCounter < excludeWithin.length) {
185            if ($link.closest(excludeWithin[ewlCounter++]).length) {
186              include = false;
187            }
188          }
189        }
190
191        if (include) {
192          if (thisOpts.preventDefault) {
193            event.preventDefault();
194          }
195
196          $.extend(clickOpts, thisOpts, {
197            scrollTarget: thisOpts.scrollTarget || thisHash,
198            link: link
199          });
200
201          $.smoothScroll(clickOpts);
202        }
203      };
204
205      if (options.delegateSelector !== null) {
206        this
207        .undelegate(options.delegateSelector, 'click.smoothscroll')
208        .delegate(options.delegateSelector, 'click.smoothscroll', clickHandler);
209      } else {
210        this
211        .unbind('click.smoothscroll')
212        .bind('click.smoothscroll', clickHandler);
213      }
214
215      return this;
216    }
217  });
218
219  $.smoothScroll = function(options, px) {
220    if (options === 'options' && typeof px === 'object') {
221      return $.extend(optionOverrides, px);
222    }
223    var opts, $scroller, scrollTargetOffset, speed, delta;
224    var scrollerOffset = 0;
225    var offPos = 'offset';
226    var scrollDir = 'scrollTop';
227    var aniProps = {};
228    var aniOpts = {};
229
230    if (typeof options === 'number') {
231      opts = $.extend({link: null}, $.fn.smoothScroll.defaults, optionOverrides);
232      scrollTargetOffset = options;
233    } else {
234      opts = $.extend({link: null}, $.fn.smoothScroll.defaults, options || {}, optionOverrides);
235
236      if (opts.scrollElement) {
237        offPos = 'position';
238
239        if (opts.scrollElement.css('position') === 'static') {
240          opts.scrollElement.css('position', 'relative');
241        }
242      }
243    }
244
245    scrollDir = opts.direction === 'left' ? 'scrollLeft' : scrollDir;
246
247    if (opts.scrollElement) {
248      $scroller = opts.scrollElement;
249
250      if (!(/^(?:HTML|BODY)$/).test($scroller[0].nodeName)) {
251        scrollerOffset = $scroller[scrollDir]();
252      }
253    } else {
254      $scroller = $('html, body').firstScrollable(opts.direction);
255    }
256
257    // beforeScroll callback function must fire before calculating offset
258    opts.beforeScroll.call($scroller, opts);
259
260    scrollTargetOffset = (typeof options === 'number') ? options :
261                          px ||
262                          ($(opts.scrollTarget)[offPos]() &&
263                          $(opts.scrollTarget)[offPos]()[opts.direction]) ||
264                          0;
265
266    aniProps[scrollDir] = scrollTargetOffset + scrollerOffset + opts.offset;
267    speed = opts.speed;
268
269    // automatically calculate the speed of the scroll based on distance / coefficient
270    if (speed === 'auto') {
271
272      // $scroller[scrollDir]() is position before scroll, aniProps[scrollDir] is position after
273      // When delta is greater, speed will be greater.
274      delta = Math.abs(aniProps[scrollDir] - $scroller[scrollDir]());
275
276      // Divide the delta by the coefficient
277      speed = delta / opts.autoCoefficient;
278    }
279
280    aniOpts = {
281      duration: speed,
282      easing: opts.easing,
283      complete: function() {
284        opts.afterScroll.call(opts.link, opts);
285      }
286    };
287
288    if (opts.step) {
289      aniOpts.step = opts.step;
290    }
291
292    if ($scroller.length) {
293      $scroller.stop().animate(aniProps, aniOpts);
294    } else {
295      opts.afterScroll.call(opts.link, opts);
296    }
297  };
298
299  $.smoothScroll.version = version;
300  $.smoothScroll.filterPath = function(string) {
301    string = string || '';
302
303    return string
304      .replace(/^\//, '')
305      .replace(/(?:index|default).[a-zA-Z]{3,4}$/, '')
306      .replace(/\/$/, '');
307  };
308
309  // default options
310  $.fn.smoothScroll.defaults = defaults;
311
312}));
313