RyoSugimoto
1/6/2015 - 9:36 AM

ページ内リンクを、スムーズにスクロールさせるプラグイン。

ページ内リンクを、スムーズにスクロールさせるプラグイン。

/**
 * スムーズスクロール
 */
!(function (window, document, $, undefined) {
	
	var isHtmlScroll = (function () {
		var $html = $('html'),
			top = $html.scrollTop(),
			$el = $('<div/>').height(10000).prependTo('body');
		$html.scrollTop(10000);
		var rs = !!$html.scrollTop();
		$html.scrollTop(top);
		$el.remove();
		return rs;
	}());
	var $scrollElm = $(isHtmlScroll ? 'html' : 'body');

	/*
	if (navigator.userAgent.indexOf('AppleWebKit') !== -1) {
		$scrollElm = $('body');
	} else {
		$scrollElm = $('html');
	}
	*/

	$.fn.smoothScroll = function (options) {
		options = $.extend({}, {
			duration: 1000,
			easing: 'linear',
			hash: true,
			afterScroll: function () {
				$.noop();
			}
		}, options)
		return this.each(function () {
			var $anchor = $(this);
			var hash = $anchor.attr('href');
			var $target = $(hash);

			if (!$target.length) {
				return true;
			}

			$anchor.on('click', function (e) {
				var point = $target.offset().top;
				e.preventDefault();
				$scrollElm.animate({
						scrollTop: point
				}, options.duration, options.easing, function () {
					if (options.hash) {
						window.location.hash = hash;
					}
					if (typeof options.afterScroll === 'function') {
						options.afterScroll();
					}
				}); // /$scrollElm.animate
			}); // /$anchor.on
		}); // /return this.each
	}; // /$.fn.smoothScroll
}(window, document, jQuery));