https://3s-corp.co.jp/js/smoothscroll.js

1/* Smooth scrolling
2   Changes links that link to other parts of this page to scroll
3   smoothly to those links rather than jump to them directly, which
4   can be a little disorienting.
5   
6   sil, http://www.kryogenix.org/
7   
8   v1.0 2003-11-11
9   v1.1 2005-06-16 wrap it up in an object
10*/
11
12var ss = {
13  fixAllLinks: function() {
14    // Get a list of all links in the page
15    var allLinks = document.getElementsByTagName('a');
16    // Walk through the list
17    for (var i=0;i<allLinks.length;i++) {
18      var lnk = allLinks[i];
19      if ((lnk.href && lnk.href.indexOf('#') != -1) && 
20          ( (lnk.pathname == location.pathname) ||
21	    ('/'+lnk.pathname == location.pathname) ) && 
22          (lnk.search == location.search)) {
23        // If the link is internal to the page (begins in #)
24        // then attach the smoothScroll function as an onclick
25        // event handler
26        ss.addEvent(lnk,'click',ss.smoothScroll);
27      }
28    }
29  },
30
31  smoothScroll: function(e) {
32    // This is an event handler; get the clicked on element,
33    // in a cross-browser fashion
34    if (window.event) {
35      target = window.event.srcElement;
36    } else if (e) {
37      target = e.target;
38    } else return;
39
40    // Make sure that the target is an element, not a text node
41    // within an element
42    if (target.nodeName.toLowerCase() != 'a') {
43      target = target.parentNode;
44    }
45  
46    // Paranoia; check this is an A tag
47    if (target.nodeName.toLowerCase() != 'a') return;
48  
49    // Find the <a name> tag corresponding to this href
50    // First strip off the hash (first character)
51    anchor = target.hash.substr(1);
52    // Now loop all A tags until we find one with that name
53    var allLinks = document.getElementsByTagName('a');
54    var destinationLink = null;
55    for (var i=0;i<allLinks.length;i++) {
56      var lnk = allLinks[i];
57      if (lnk.name && (lnk.name == anchor)) {
58        destinationLink = lnk;
59        break;
60      }
61    }
62    if (!destinationLink) destinationLink = document.getElementById(anchor);
63
64    // If we didn't find a destination, give up and let the browser do
65    // its thing
66    if (!destinationLink) return true;
67  
68    // Find the destination's position
69    var destx = destinationLink.offsetLeft; 
70    var desty = destinationLink.offsetTop;
71    var thisNode = destinationLink;
72    while (thisNode.offsetParent && 
73          (thisNode.offsetParent != document.body)) {
74      thisNode = thisNode.offsetParent;
75      destx += thisNode.offsetLeft;
76      desty += thisNode.offsetTop;
77    }
78  
79    // Stop any current scrolling
80    clearInterval(ss.INTERVAL);
81  
82    cypos = ss.getCurrentYPos();
83  
84    ss_stepsize = parseInt((desty-cypos)/ss.STEPS);
85    ss.INTERVAL =
86setInterval('ss.scrollWindow('+ss_stepsize+','+desty+',"'+anchor+'")',10);
87  
88    // And stop the actual click happening
89    if (window.event) {
90      window.event.cancelBubble = true;
91      window.event.returnValue = false;
92    }
93    if (e && e.preventDefault && e.stopPropagation) {
94      e.preventDefault();
95      e.stopPropagation();
96    }
97  },
98
99  scrollWindow: function(scramount,dest,anchor) {
100    wascypos = ss.getCurrentYPos();
101    isAbove = (wascypos < dest);
102    window.scrollTo(0,wascypos + scramount);
103    iscypos = ss.getCurrentYPos();
104    isAboveNow = (iscypos < dest);
105    if ((isAbove != isAboveNow) || (wascypos == iscypos)) {
106      // if we've just scrolled past the destination, or
107      // we haven't moved from the last scroll (i.e., we're at the
108      // bottom of the page) then scroll exactly to the link
109      window.scrollTo(0,dest);
110      // cancel the repeating timer
111      clearInterval(ss.INTERVAL);
112      // and jump to the link directly so the URL's right
113      location.hash = anchor;
114    }
115  },
116
117  getCurrentYPos: function() {
118    if (document.body && document.body.scrollTop)
119      return document.body.scrollTop;
120    if (document.documentElement && document.documentElement.scrollTop)
121      return document.documentElement.scrollTop;
122    if (window.pageYOffset)
123      return window.pageYOffset;
124    return 0;
125  },
126
127  addEvent: function(elm, evType, fn, useCapture) {
128    // addEvent and removeEvent
129    // cross-browser event handling for IE5+,  NS6 and Mozilla
130    // By Scott Andrew
131    if (elm.addEventListener){
132      elm.addEventListener(evType, fn, useCapture);
133      return true;
134    } else if (elm.attachEvent){

135      var r = elm.attachEvent("on"+evType, fn);
136      return r;
137    } else {
138      alert("Handler could not be removed");
139    }
140  } 
141}
142
143ss.STEPS = 25;
144
145ss.addEvent(window,"load",ss.fixAllLinks);
146
147
148
149
150
151/* Smooth scrolling
152   Changes links that link to other parts of this page to scroll
153   smoothly to those links rather than jump to them directly, which
154   can be a little disorienting.
155   
156   sil, http://www.kryogenix.org/
157   
158   v1.0 2003-11-11
159   v1.1 2005-06-16 wrap it up in an object
160*/
161
162var ss2 = {
163  fixAllLinks: function() {
164    // Get a list of all links in the page
165    var allLinks2 = document.getElementsByTagName('area');
166    // Walk through the list
167    for (var i=0;i<allLinks2.length;i++) {
168      var lnk2 = allLinks2[i];
169      if ((lnk2.href && lnk2.href.indexOf('#') != -1) && 
170          ( (lnk2.pathname == location.pathname) ||
171	    ('/'+lnk2.pathname == location.pathname) ) && 
172          (lnk2.search == location.search)) {
173        // If the link is internal to the page (begins in #)
174        // then attach the smoothScroll function as an onclick
175        // event handler
176        ss2.addEvent(lnk2,'click',ss2.smoothScroll);
177      }
178    }
179  },
180
181  smoothScroll: function(e) {
182    // This is an event handler; get the clicked on element,
183    // in a cross-browser fashion
184    if (window.event) {
185      target = window.event.srcElement;
186    } else if (e) {
187      target = e.target;
188    } else return;
189
190    // Make sure that the target is an element, not a text node
191    // within an element
192    if (target.nodeName.toLowerCase() != 'area') {
193      target = target.parentNode;
194    }
195  
196    // Paranoia; check this is an A tag
197    if (target.nodeName.toLowerCase() != 'area') return;
198  
199    // Find the <a name> tag corresponding to this href
200    // First strip off the hash (first character)
201    anchor = target.hash.substr(1);
202    // Now loop all A tags until we find one with that name
203    var allLinks2 = document.getElementsByTagName('area');
204    var destinationLink2 = null;
205    for (var i=0;i<allLinks2.length;i++) {
206      var lnk2 = allLinks2[i];
207      if (lnk2.name && (lnk2.name == anchor)) {
208        destinationLink2 = lnk2;
209        break;
210      }
211    }
212    if (!destinationLink2) destinationLink2 = document.getElementById(anchor);
213
214    // If we didn't find a destination, give up and let the browser do
215    // its thing
216    if (!destinationLink2) return true;
217  
218    // Find the destination's position
219    var destx2 = destinationLink2.offsetLeft; 
220    var desty2 = destinationLink2.offsetTop;
221    var thisNode2 = destinationLink2;
222    while (thisNode2.offsetParent && 
223          (thisNode2.offsetParent != document.body)) {
224      thisNode2 = thisNode2.offsetParent;
225      destx2 += thisNode2.offsetLeft;
226      desty2 += thisNode2.offsetTop;
227    }
228  
229    // Stop any current scrolling
230    clearInterval(ss2.INTERVAL);
231  
232    cypos = ss2.getCurrentYPos();
233  
234    ss2_stepsize = parseInt((desty2-cypos)/ss2.STEPS);
235    ss2.INTERVAL =
236setInterval('ss2.scrollWindow('+ss2_stepsize+','+desty2+',"'+anchor+'")',10);
237  
238    // And stop the actual click happening
239    if (window.event) {
240      window.event.cancelBubble = true;
241      window.event.returnValue = false;
242    }
243    if (e && e.preventDefault && e.stopPropagation) {
244      e.preventDefault();
245      e.stopPropagation();
246    }
247  },
248
249  scrollWindow: function(scramount,dest2,anchor) {
250    wascypos = ss2.getCurrentYPos();
251    isAbove = (wascypos < dest2);
252    window.scrollTo(0,wascypos + scramount);
253    iscypos = ss2.getCurrentYPos();
254    isAboveNow = (iscypos < dest2);
255    if ((isAbove != isAboveNow) || (wascypos == iscypos)) {
256      // if we've just scrolled past the destination, or
257      // we haven't moved from the last scroll (i.e., we're at the
258      // bottom of the page) then scroll exactly to the link
259      window.scrollTo(0,dest2);
260      // cancel the repeating timer
261      clearInterval(ss2.INTERVAL);
262      // and jump to the link directly so the URL's right
263      location.hash = anchor;
264    }
265  },
266
267  getCurrentYPos: function() {
268    if (document.body && document.body.scrollTop)
269      return document.body.scrollTop;
270    if (document.documentElement && document.documentElement.scrollTop)
271      return document.documentElement.scrollTop;
272    if (window.pageYOffset)
273      return window.pageYOffset;
274    return 0;
275  },
276
277  addEvent: function(elm, evType, fn, useCapture) {
278    // addEvent and removeEvent
279    // cross-browser event handling for IE5+,  NS6 and Mozilla
280    // By Scott Andrew
281    if (elm.addEventListener){
282      elm.addEventListener(evType, fn, useCapture);
283      return true;
284    } else if (elm.attachEvent){

285      var r2 = elm.attachEvent("on"+evType, fn);
286      return r2;
287    } else {
288      alert("Handler could not be removed");
289    }
290  } 
291}
292
293ss2.STEPS = 25;
294
295ss2.addEvent(window,"load",ss2.fixAllLinks);