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

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