Skip to content

Instantly share code, notes, and snippets.

@webbingstudio
Created January 14, 2018 18:04
Show Gist options
  • Save webbingstudio/bb3290266c4f5e36662e1f05537aa236 to your computer and use it in GitHub Desktop.
Save webbingstudio/bb3290266c4f5e36662e1f05537aa236 to your computer and use it in GitHub Desktop.
ランディングページ向けのスムーズスクロール:ヘッダ固定演出を考慮し、マージンと、マージンを有効にするブレークポイントポイントを追加できる/スクロール距離が1000pxを超えると速度が上がる
/*
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