Smooth Scroll To Named Anchor With Javascript Tutorial
Smooth Scroll to named Anchor Code...
Smooth Scoll to the Javascript...
Smooth Scoll to make a Comment... Back To Top
This is a really cool little script! To use, just include the script and name your anchor, it's that simple. One thing I found though... FX does not like html,body{height:100%} in conjunction with this script. It still works, it just looses it's smooth motion. However, chances are, if you need the smooth scroll script, your page is most likely pretty long to begin with, so you probably don't need the height 100% anyways. So just override it like I did here - body{height:auto}.
Note: Credit for script goes here. As is, its using named anchors. You can change the last part of the script to an id instead of name (AKA name==l to id==l) to use id's instead. That has always worked perfect for me untill I recently added addthis to one of my sites. Then this script broke addthis. I used this jQuery plugin instead.
Back To Top<a href="#funky">Take me to Funky Town</a> <a name="funky">Arrive at Funky Town</a>Back To Top
// Smooth Scroll by Dezinerfolio http://www.dezinerfolio.com
Scroller={speed:10,gy:function(A){gy=A.offsetTop;if(A.offsetParent){while(A=A.offsetParent){gy+=A.offsetTop}}return gy},scrollTop:function(){body=document.body;d=document.documentElement;if(body&&body.scrollTop){return body.scrollTop}if(d&&d.scrollTop){return d.scrollTop}if(window.pageYOffset){return window.pageYOffset}return 0},add:function(B,A,C){if(B.addEventListener){return B.addEventListener(A,C,false)}if(B.attachEvent){return B.attachEvent("on"+A,C)}},end:function(A){if(window.event){window.event.cancelBubble=true;window.event.returnValue=false;return }if(A.preventDefault&&A.stopPropagation){A.preventDefault();A.stopPropagation()}},scroll:function(A){i=window.innerHeight||document.documentElement.clientHeight;h=document.body.scrollHeight;a=Scroller.scrollTop();if(A>a){if(h-A>i){a+=Math.ceil((A-a)/Scroller.speed)}else{a+=Math.ceil((A-a-(h-A))/Scroller.speed)}}else{a=a+(A-a)/Scroller.speed}window.scrollTo(0,a);if(a==A||Scroller.offsetTop==a){clearInterval(Scroller.interval)}Scroller.offsetTop=a},init:function(){Scroller.add(window,"load",Scroller.render)},render:function(){a=document.getElementsByTagName("a");Scroller.end(this);window.onscroll;for(i=0;i<a.length;i++){l=a[i];if(l.href&&l.href.indexOf("#")!=-1&&((l.pathname==location.pathname)||("/"+l.pathname==location.pathname))){Scroller.add(l,"click",Scroller.end);l.onclick=function(){Scroller.end(this);l=this.hash.substr(1);a=document.getElementsByTagName("a");for(i=0;i<a.length;i++){if(a[i].name==l){clearInterval(Scroller.interval);Scroller.interval=setInterval("Scroller.scroll("+Scroller.gy(a[i])+")",10)}}}}}}};Scroller.init();
Back To Top
