Getting accordion, smoothscroll, and styleswitcher to play together

[organiclemonade]

I've been working on a rough template for wordpress. I'd like to include three javascript elements: an accordion menu, a smoothscroll effect, and a style switcher. I can get all of them to work, but not together. The main conflict, I think, is between my styleswitcher, which uses an href="#" tag in the links, and my smoothscroll, which uses an href="#header" and the like.

So, first question, Have I correctly identified the conflict?

Second, whether or not I have correctly identified the conflict, how can I get my smoothscroll and styleswitcher to work together?

I'm using deziner folio javascripts for my accordion and my smoothscroll. They don't have a styleswitcher, so I'm using the js from this site.

My playground for all this is here.

[clueful]

I've been working on a rough template for wordpress. I'd like to include three javascript elements: an accordion menu, a smoothscroll effect, and a style switcher. I can get all of them to work, but not together. The main conflict, I think, is between my styleswitcher, which uses an href="#" tag in the links, and my smoothscroll, which uses an href="#header" and the like.

So, first question, Have I correctly identified the conflict?

Having decoded the smoothscroll script I can see that it creates several unnecessary global variables, despite being written as a static object.
Try this amended version:

var Scroller=
{
   speed:10,
   offsetParent:function(d)
   {
    offsetParent=d.offsetTop;
    if(d.offsetParent)
    {
     while((d=d.offsetParent))
     {
      offsetParent+=d.offsetTop;
     }
    }
    return offsetParent;
   },
   scrollTop:function()
   {
    var body=document.body;
    var 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;
   },
   
   attachEvent:function(a,b,d)
   {
    if(a.addEventListener)
    {
     return a.addEventListener(b,d,false);
    }
    if(a.attachEvent)
    {
     return a.attachEvent("on"+b,d);
    }
   },
   
   end:function(e)
   {
    if(window.event)
    {
     window.event.cancelBubble=true;
     window.event.returnValue=false;
     return;
    }
    if(e.preventDefault&&e.stopPropagation)
    {
     e.preventDefault();
     e.stopPropagation();
    }
   },
   
   scroll:function(d)
   {
    var i=window.innerHeight||document.documentElement.clientHeight;
    var h=document.body.scrollHeight;
    var a=Scroller.scrollTop();
    
    if(d>a)
    {
     if(h-d>i)
     {
      a+=Math.ceil((d-a)/Scroller.speed);
     }
     else
     {
      a+=Math.ceil((d-a-(h-d))/Scroller.speed);
     }
    }
    else
    {
     a=a+(d-a)/Scroller.speed;
    }
    window.scrollTo(0,a);
    
    if(a==d||Scroller.offsetTop==a)
    {
     clearInterval(Scroller.interval);
    }
    
    Scroller.offsetTop=a;
    },
    
    init:function()
    {
     Scroller.attachEvent(window,"load",Scroller.load);
    },
    
    load:function()
    {
     var a=document.getElementsByTagName("a");
     Scroller.end(this);
     
     for(var i=0;i<a.length;i++)
     {
      var l=a[i];
      var d=location.pathname;
      if(l.href&&l.href.indexOf("#")!=-1&&(l.pathname==d||"/"+l.pathname==d))
      {
       Scroller.attachEvent(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.offsetParent(a[i])+")",10);
         }
        }
       }
      }
     }
    }
};
Scroller.init();

If it still doesn't work with the other scripts, try SoftScroll instead.

[organiclemonade]

Thanks clueful. It's nice to have cleaner script. The problem still persists, though. Here's the code used for the link to the stylesheet tree.css, one of my options for the styleswitcher:

<a title="Tree" onclick="setActiveStyleSheet('tree'); return false;" href="#">

If I change the href from # to a period, it works. Is there a reason I shouldn't do that?

[clueful]

Thanks clueful. It's nice to have cleaner script. The problem still persists, though. Here's the code used for the link to the stylesheet tree.css, one of my options for the styleswitcher:

<a title="Tree" onclick="setActiveStyleSheet('tree'); return false;" href="#">

If I change the href from # to a period, it works. Is there a reason I shouldn't do that?

I'm not sure what effect a '.' has, but the smoothscroll script applies onclick handlers in a way that overwrites any pre-existing handler, but if it doesn't see a '#' in the href it doesn't apply anything to the link.

[organiclemonade]

I'm back. The href="." thing seems to work more or less, but it's not ideal. What I'd like to do, either using dezinerfolio's smoothscroll or the softscroll link clueful suggested, is to make it so that the anchors are not defined by, say, #header. Smoothscroll is hogging the # anchors and interfering with other javascript that uses anchors. It's also interfering with my comments links and others that use #anchors. Is it possible to define an anchor in other terms? (As you can tell, I don't know ****)