https://welcomehotel.jp/common/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 = 5;
144
145ss.addEvent(window,"load",ss.fixAllLinks);