// JavaScript Document /* ======================== * jquery.smoothscroll.ar.js * Version 1.1 * * Development Source * ======================== */ (function( $ ) { $.fn.smoothscroll = function(options) { // オプション項目のデフォルト値を設定 var defaults = { btnMode : 'fade', btnCourse : 'bottom', btnSpeed : 200, btnBottom : 'auto', btnRight : 'auto', btnInEasing : 'swing', btnOutEasing : '', btnAdvent : 400, btnWrapper : 'totop', autoAdjust : false, adaptiveElement : 'header', manualAdjust : 0, speed : 1000, easing : 'swing', pageJumpScroll : true } // 引数からオプション項目を設定 var settings = $.extend(defaults,options); // 使用する変数を定義 var currentUrl, pushHref, target, position, urlsprit, hashstr, hrefUrl, hrefPage, currentPage, topBtn, showFlag, bttExit, btnOffPos, headerHeight; /* ============ * パブリックメソッド群 * ============ */ // スクロール処理 function scroll_act( href, ypos, settings ) { // 移動先を取得 target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 position = target.offset().top - getHeaderHeight() - settings.manualAdjust; // 移動先の座標が0以下の場合は0を代入 if( position < 1 ) { position = 0; } // スムーススクロール if( parseInt(position) != ypos) { $('body,html').animate({scrollTop:position}, settings.speed, settings.easing); } return false; // end method } // 引数URLから#以後を抽出 function get_hash( url ) { urlsprit = url.split("#"); hashstr = urlsprit.pop(); hashstr = "#" + hashstr; return hashstr; // end method } // To-Topボタン退場座標の設定 function set_btnOffPos() { // 退場時の画面端からの距離を”200+ボタン要素の大きさpx”で求める(画面の外側で200pxのマージンをとる) if ( settings.btnCourse == 'left' || settings.btnCourse == 'right' ) { btnOffPos = (200 + topBtn.width()); } else { btnOffPos = (200 + topBtn.height()); } switch ( settings.btnCourse ) { case 'top' : btnOffPos = $(window).height() + btnOffPos + 'px'; break; case 'right' : btnOffPos = '-' + btnOffPos + 'px'; break; case 'bottom' : btnOffPos = '-' + btnOffPos + 'px'; break; case 'left' : btnOffPos = $(window).width() + btnOffPos + 'px'; break; default : settings.btnCourse = 'bottom'; btnOffPos = '-' + btnOffPos + 'px'; break; } return(this); //end method } // To-Topボタン座標のリセット(初期位置へ戻す処理) function reset_btnPosition() { showFlag = false; if ( settings.btnCourse == 'left' || settings.btnCourse == 'right' ) { topBtn.css({'bottom' : settings.btnBottom, 'right' : btnOffPos}); btnOnPos = settings.btnRight + 'px'; } else { topBtn.css({'bottom' : btnOffPos, 'right' : settings.btnRight}); btnOnPos = settings.btnBottom + 'px'; } return(this); // end method } // To-Topボタンの登場 function appearance_btn() { // 出現フラグON showFlag = true; // スライドモードかフェードモードかで処理を分岐 if( settings.btnMode == 'slide' ) { // スライドモードの場合 if( settings.btnCourse == 'left' || settings.btnCourse == 'right' ) { topBtn.stop().animate({'right' : btnOnPos}, settings.btnSpeed, settings.btnInEasing); } else { topBtn.stop().animate({'bottom' : btnOnPos}, settings.btnSpeed, settings.btnInEasing); } } else { if( settings.btnMode == 'fade' ) { // フェードモードの場合 topBtn.fadeIn(); } } } // To-Topボタンの退場 function exit_btn() { // 出現フラグOFF showFlag = false; // スライドモードかフェードモードかで処理を分岐 if( settings.btnMode == 'slide' ) { // 規定値未満のスクロール量で表示フラグがtrueの場合、ボタンを隠す if( settings.btnCourse == 'left' || settings.btnCourse == 'right' ) { topBtn.stop().animate({'right' : btnOffPos}, settings.btnSpeed, settings.btnOutEasing); } else { topBtn.stop().animate({'bottom' : btnOffPos}, settings.btnSpeed, settings.btnOutEasing); } } else { if( settings.btnMode == 'fade' ) { // フェードモードの場合 topBtn.fadeOut(); } } } // ヘッダー要素の高さを取得して戻す function getHeaderHeight() { // ヘッダー要素の高さを返す if(settings.autoAdjust) { return $(settings.adaptiveElement).outerHeight(); } else { return 0; } } /* ============ * イベント定義部 * ============ */ // ページを読み込んだときの動作 $(window).load(function(){ // TO-TOPボタンの初期設定処理 showFlag = false; topBtn = $('#'+settings.btnWrapper); // TO-TOPボタンのbottom値が指定されていない場合、CSSから取得する if( settings.btnBottom == 'auto' || settings.btnBottom == null || settings.btnBottom == undefined ) { settings.btnBottom = parseInt($(topBtn).css('bottom')); } // TO-TOPボタンのright値が指定されていない場合、CSSから取得する if( settings.btnRight == 'auto' || settings.btnRight == null || settings.btnRight == undefined ) { settings.btnRight = parseInt($(topBtn).css('right')); } // スライドモードかフェードモードかで処理を分岐 if( settings.btnMode == 'slide' ) { // スライドモードの場合 // 処理用変数の初期化 bttExit = settings.btnCourse; // 退場イージングが指定されていない場合、出現イージングと同じに設定 if( settings.btnOutEasing == '' || settings.btnOutEasing == null || settings.btnOutEasing == undefined ) { settings.btnOutEasing = settings.btnInEasing; } // 座標初期化処理の呼び出し set_btnOffPos(settings); reset_btnPosition(settings); } else { if( settings.btnMode == 'fade' || settings.btnMode != 'fixed' ) { // slideまたはfixed以外の値だった場合 settings.btnMode = 'fade'; // ボタンを非表示にする topBtn.hide(); // ボタンの表示座標を設定値で上書きする topBtn.css({'bottom' : settings.btnBottom, 'right' : settings.btnRight}); } } // 現在URLを取得 currentUrl = location.href; if( settings.pageJumpScroll == true ) { // 現在URLに#があるかどうかを判定 if ( currentUrl.indexOf('#') != -1 ) { pushHref = get_hash(currentUrl); // スクロール位置をゼロ地点まで戻す window.scroll(0,0); // メインメソッドの呼び出し scroll_act(pushHref, $(window).scrollTop(), settings); } } return(this); }); // リンクをクリックしたときの動作 $('a').click(function() { // href属性値の絶対URLを取得 hrefUrl = $(this).prop("href"); // href属性値から#以後を除外 hrefPage = hrefUrl.split("#")[0]; // 現在ページの絶対URLから#以後を除外 currentPage = currentUrl.split("#")[0]; // href属性の移動先が現在ページかどうかを判定 if( hrefPage == currentPage ) { // 現在ページへのリンクの場合 if ( hrefUrl.indexOf('#') != -1 ) { // href属性値から#以後を抽出 pushHref = get_hash(hrefUrl); } else { pushHref = '#'; } // メインメソッドの呼び出し console.info($(window).scrollTop()); if( $(window).width() < 768 ) { // Windowのwidthが768未満(スマホモード時) if( $(this).hasClass("dropdown-toggle")) { // クリックしたリンクが"dropdown-toggle"である場合 return(this); } else { // クリックしたリンクが"dropdown-toggle"ではない場合 scroll_act(pushHref, $(window).scrollTop(), settings); } } else { // Windowのwidthが768以上(PC/タブレットモード) scroll_act(pushHref, $(window).scrollTop(), settings); } } else { return(this); } return false; }); // リサイズ時に退場先座標を再設定(ボタン非表示中はボタン座標も調整) $(window).resize(function(){ if( settings.btnMode == 'slide' ){ set_btnOffPos(); // ボタンが非表示状態なら、現在位置を調整する if (showFlag == false) { reset_btnPosition(); } } return(this); }); // スクロール量に応じてボタンが出現 $(window).on("load scroll", function() { // 画面のスクロール量が規定値を超えたかどうかで判定 if ($(this).scrollTop() > settings.btnAdvent) { // 規定値を超えるスクロール量で表示フラグがfalseの場合、ボタンを表示する if ( showFlag == false ) { appearance_btn(); } } else { // 規定値未満のスクロール量で表示フラグがtrueの場合、ボタンを隠す if ( showFlag ) { exit_btn(); } } return(this); }); return(this); }; /* end plug-in*/ })( jQuery );