https://lovely2.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  
63    // If we didn't find a destination, give up and let the browser do
64    // its thing
65    if (!destinationLink) return true;
66  
67    // Find the destination's position
68    var destx = destinationLink.offsetLeft; 
69    var desty = destinationLink.offsetTop;
70    var thisNode = destinationLink;
71    while (thisNode.offsetParent && 
72          (thisNode.offsetParent != document.body)) {
73      thisNode = thisNode.offsetParent;
74      destx += thisNode.offsetLeft;
75      desty += thisNode.offsetTop;
76    }
77  
78    // Stop any current scrolling
79    clearInterval(ss.INTERVAL);
80  
81    cypos = ss.getCurrentYPos();
82  
83    ss_stepsize = parseInt((desty-cypos)/ss.STEPS);
84    ss.INTERVAL =
85setInterval('ss.scrollWindow('+ss_stepsize+','+desty+',"'+anchor+'")',10);
86  
87    // And stop the actual click happening
88    if (window.event) {
89      window.event.cancelBubble = true;
90      window.event.returnValue = false;
91    }
92    if (e && e.preventDefault && e.stopPropagation) {
93      e.preventDefault();
94      e.stopPropagation();
95    }
96  },
97
98  scrollWindow: function(scramount,dest,anchor) {
99    wascypos = ss.getCurrentYPos();
100    isAbove = (wascypos < dest);
101    window.scrollTo(0,wascypos + scramount);
102    iscypos = ss.getCurrentYPos();
103    isAboveNow = (iscypos < dest);
104    if ((isAbove != isAboveNow) || (wascypos == iscypos)) {
105      // if we've just scrolled past the destination, or
106      // we haven't moved from the last scroll (i.e., we're at the
107      // bottom of the page) then scroll exactly to the link
108      window.scrollTo(0,dest);
109      // cancel the repeating timer
110      clearInterval(ss.INTERVAL);
111      // and jump to the link directly so the URL's right
112      location.hash = anchor;
113    }
114  },
115
116  getCurrentYPos: function() {
117    if (document.body && document.body.scrollTop)
118      return document.body.scrollTop;
119    if (document.documentElement && document.documentElement.scrollTop)
120      return document.documentElement.scrollTop;
121    if (window.pageYOffset)
122      return window.pageYOffset;
123    return 0;
124  },
125
126  addEvent: function(elm, evType, fn, useCapture) {
127    // addEvent and removeEvent
128    // cross-browser event handling for IE5+,  NS6 and Mozilla
129    // By Scott Andrew
130    if (elm.addEventListener){
131      elm.addEventListener(evType, fn, useCapture);
132      return true;
133    } else if (elm.attachEvent){

134      var r = elm.attachEvent("on"+evType, fn);
135      return r;
136    } else {
137      alert("Handler could not be removed");
138    }
139  } 
140}
141
142ss.STEPS = 35;
143
144ss.addEvent(window,"load",ss.fixAllLinks);