Created
January 14, 2018 18:04
-
-
Save webbingstudio/bb3290266c4f5e36662e1f05537aa236 to your computer and use it in GitHub Desktop.
ランディングページ向けのスムーズスクロール:ヘッダ固定演出を考慮し、マージンと、マージンを有効にするブレークポイントポイントを追加できる/スクロール距離が1000pxを超えると速度が上がる
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
jquery_wsscrollto.js | |
-------------------- | |
https://gist.github.com/webbingstudio/bb3290266c4f5e36662e1f05537aa236 | |
Author: WebbingStudio | |
Released under the MIT license | |
http://opensource.org/licenses/MIT | |
*/ | |
;(function($){ | |
"use strict"; | |
var WsScrollTo = window.WsScrollTo || {}; | |
WsScrollTo = (function() { | |
function WsScrollTo(element, options) { | |
var | |
t = this; | |
t.initials = { | |
margin: 0, | |
margin_off: 0, | |
margin_extend: 0, | |
speed: 300 | |
}; | |
t.settings = $.extend({}, t.initials, options); | |
t.init(element); | |
$(element).on('click', function() { | |
t.run(element); | |
return false; | |
}); | |
return false; | |
} | |
return WsScrollTo; | |
}()); | |
WsScrollTo.prototype.init = function(element) { | |
var | |
t = this; | |
return false; | |
}; | |
WsScrollTo.prototype.run = function(element) { | |
var | |
t = this, | |
href, | |
target, | |
wt, | |
tt, | |
ss; | |
href = element.hash; | |
target = $(href == '#top' ? 'body' : href); | |
if(target.size()){ | |
wt = $(window).scrollTop(); | |
tt = parseFloat(target.offset().top, 10) - parseFloat(t.settings.margin, 10); | |
if(wt < t.settings.margin_off) { | |
tt -= parseFloat(t.settings.margin_extend, 10); | |
} | |
// If the moving distance exceeds 1000px, increase scroll time | |
ss = t.settings.speed; | |
if( Math.abs(wt-tt) > 1000 ) { | |
ss = ( Math.abs(wt-tt) / 1000 ) / 1.5 * ss; | |
} | |
$('html, body').animate({scrollTop:tt}, ss, 'swing'); | |
} | |
return false; | |
}; | |
$.fn.WsScrollTo = function() { | |
var | |
element = this, | |
options = arguments[0], | |
args = Array.prototype.slice.call(arguments, 1), | |
i; | |
for (i = 0; i < element.length; i++) { | |
if (typeof options == 'object' || typeof options == 'undefined') { | |
element[i].WsScrollTo = new WsScrollTo(element[i], options); | |
} | |
} | |
return element; | |
}; | |
$(function(){ | |
$('.js-scrollto').WsScrollTo(); | |
$('.globalnav a[href^="#"]').WsScrollTo({ | |
margin: $('.globalnav').height(), | |
margin_off: $('.header').height(), | |
margin_extend: 70 | |
}); | |
}); | |
})(jQuery); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment