https://www.wacoal.jp/news/lib/js/scroll.js

1
2(function(){
3   var easing = 0.25;
4   var interval = 20;
5   var d = document;
6   var targetX = 0;
7   var targetY = 0;
8   var targetHash = '';
9   var scrolling = false;
10   var splitHref = location.href.split('#');
11   var currentHref_WOHash = splitHref[0];
12   var incomingHash = splitHref[1];
13   var prevX = null;
14   var prevY = null;
15
16   // ドキュメント読み込み完了時にinit()を実行する
17   addEvent(window, 'load', init);
18
19   // ドキュメント読み込み完了時の処理
20   function init(){
21     // ページ内リンクにイベントを設定する
22     setOnClickHandler();
23     // 外部からページ内リンク付きで呼び出された場合
24     if(incomingHash){
25       if(window.attachEvent && !window.opera){
26         // IEの場合はちょっと待ってからスクロール
27         setTimeout(function(){scrollTo(0,0);setScroll('#'+incomingHash);},50);
28       }else{
29         // IE以外はそのままGO
30         scrollTo(0, 0);
31         setScroll('#'+incomingHash);
32       }
33     }
34   }
35
36   // イベントを追加する関数
37   function addEvent(eventTarget, eventName, func){
38     if(eventTarget.addEventListener){
39       // モダンブラウザ
40       eventTarget.addEventListener(eventName, func, false);
41     }else if(window.attachEvent){
42       // IE
43       eventTarget.attachEvent('on'+eventName, function(){func.apply(eventTarget);});
44     }
45   }
46   
47   function setOnClickHandler(){
48     var links = d.links;
49     for(var i=0; i<links.length; i++){
50       // ページ内リンクならスクロールさせる
51       var link = links[i];
52       var splitLinkHref = link.href.split('#');
53       if(currentHref_WOHash == splitLinkHref[0] && d.getElementById(splitLinkHref[1])){
54         addEvent(link, 'click', startScroll);
55       }
56     }
57   }
58
59   function startScroll(event){
60     // リンクのデフォルト動作を殺す
61     if(event){ // モダンブラウザ
62       event.preventDefault();
63       //alert('modern');
64     }else if(window.event){ // IE
65       window.event.returnValue = false;
66       //alert('ie');
67     }
68     // thisは呼び出し元になってる
69     setScroll(this.hash);
70   }
71
72   function setScroll(hash){
73     // ハッシュからターゲット要素の座標をゲットする
74     var targetEle = d.getElementById(hash.substr(1));
75     if(!targetEle)return;
76     //alert(scrollSize.height);
77     // スクロール先座標をセットする
78     var ele = targetEle;
79     var x = 0;
80     var y = 0;
81     while(ele){
82       x += ele.offsetLeft;
83       y += ele.offsetTop;
84       ele = ele.offsetParent;
85     }
86     var maxScroll = getScrollMaxXY();
87     targetX = Math.min(x, maxScroll.x);
88     targetY = Math.min(y, maxScroll.y);
89     targetHash = hash;
90     // スクロール停止中ならスクロール開始
91     if(!scrolling){
92       scrolling = true;
93       scroll();
94     }
95   }
96
97   function scroll(){
98     var currentX = d.documentElement.scrollLeft||d.body.scrollLeft;
99     var currentY = d.documentElement.scrollTop||d.body.scrollTop;
100     var vx = (targetX - currentX) * easing;
101     var vy = (targetY - currentY) * easing;
102     var nextX = currentX + vx;
103     var nextY = currentY + vy;
104     if((Math.abs(vx) < 1 && Math.abs(vy) < 1)
105       || (prevX === currentX && prevY === currentY)){
106       // 目標座標付近に到達していたら終了
107       scrollTo(targetX, targetY);
108       scrolling = false;
109       location.hash = targetHash;
110       prevX = prevY = null;
111       return;
112     }else{
113       // 繰り返し
114       scrollTo(parseInt(nextX), parseInt(nextY));
115       prevX = currentX;
116       prevY = currentY;
117       setTimeout(function(){scroll()},interval);
118     }
119   }
120   
121   function getDocumentSize(){
122     return {width:Math.max(document.body.scrollWidth, document.documentElement.scrollWidth), height:Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)};
123   }
124
125   function getWindowSize(){
126     var result = {};
127     if(window.innerWidth){
128       var box = d.createElement('div');
129       with(box.style){
130         position = 'absolute';
131         top = '0px';
132         left = '0px';
133         width = '100%';
134         height = '100%';
135         margin = '0px';
136         padding = '0px';
137         border = 'none';
138         visibility = 'hidden';
139       }
140       d.body.appendChild(box);
141       var width = box.offsetWidth;
142       var height = box.offsetHeight;
143       d.body.removeChild(box);
144       result = {width:width, height:height};
145     }else{
146       result = {width:d.documentElement.clientWidth || d.body.clientWidth, height:d.documentElement.clientHeight || d.body.clientHeight};
147     }
148     return result;
149   }
150   
151   function getScrollMaxXY() {
152     if(window.scrollMaxX && window.scrollMaxY){
153       return {x:window.scrollMaxX, y:window.scrollMaxY};
154     }
155     var documentSize = getDocumentSize();
156     var windowSize = getWindowSize();
157     return {x:documentSize.width - windowSize.width, y:documentSize.height - windowSize.height};
158   }
159   
160 }());