Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts

    smooth scroll on other tags (besides <a>)

    I've been using a smooth scroll anchor script for a while. [source] Today i realized that it doesn't work with non-<a> elements.

    If I had:
    <div class="box" name="anchor" id="anchor">
    And this:
    <a href="#anchor">anchor</a>
    Then the smooth scroll won't work. It seems to work only with "real anchors".

    So my question: can this be modified to work with other elements, not just <a>?

    THanks.

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts
    Hey, that's your site isnt it?

    It was a broken link, but I looked around and found it anyway.

    I'm not sure how I can use that code with this one. Isn't there a way that I can have an array of elements, including <a>, that it works with?

    Code:
    function ss_fixAllLinks()
    {
    var allLinks = document.getElementsByTagName('a'); <- like here
    for (var i=0;i<allLinks.length;i++)
    {
    var lnk = allLinks[i];
    if ((lnk.href && lnk.href.indexOf('#') != -1) &&
    ( (lnk.pathname == location.pathname) ||
    ('/'+lnk.pathname == location.pathname) ) &&
    (lnk.search == location.search))
    {
    ss_addEvent(lnk,'click',smoothScroll);
    }
    }
    }
    function smoothScroll(e)
    {
    if (window.event)
    {
    target = window.event.srcElement;
    }
    else if (e)
    {
    target = e.target;
    }
    else return;
    if (target.nodeType == 3)
    {
    target = target.parentNode;
    }
    if (target.nodeName.toLowerCase() != 'a') return;
    anchor = target.hash.substr(1);
    var allLinks = document.getElementsByTagName('a'); or here
    var destinationLink = null;
    for (var i=0;i<allLinks.length;i++)
    {
    var lnk = allLinks[i];
    if (lnk.name && (lnk.name == anchor))
    {
    destinationLink = lnk;
    break;
    }
    }
    if (!destinationLink) return true;
    var destx = destinationLink.offsetLeft;
    var desty = destinationLink.offsetTop;
    var thisNode = destinationLink;
    while (thisNode.offsetParent &&
    (thisNode.offsetParent != document.body))
    {
    thisNode = thisNode.offsetParent;
    destx += thisNode.offsetLeft;
    desty += thisNode.offsetTop;
    }
    clearInterval(ss_INTERVAL);
    cypos = ss_getCurrentYPos();
    ss_stepsize = parseInt((desty-cypos)/ss_STEPS);
    ss_INTERVAL = setInterval('ss_scrollWindow('+ss_stepsize+','+desty+',"'+anchor+'")',10);
    if (window.event)
    {
    window.event.cancelBubble = true;
    window.event.returnValue = false;
    }
    if (e && e.preventDefault && e.stopPropagation)
    {
    e.preventDefault();
    e.stopPropagation();
    }
    }
    function ss_scrollWindow(scramount,dest,anchor)
    {
    wascypos = ss_getCurrentYPos();
    isAbove = (wascypos < dest);
    window.scrollTo(0,wascypos + scramount);
    iscypos = ss_getCurrentYPos();
    isAboveNow = (iscypos < dest);
    if ((isAbove != isAboveNow) || (wascypos == iscypos))
    {
    window.scrollTo(0,dest);
    clearInterval(ss_INTERVAL);
    location.hash = anchor;
    }
    }
    function ss_getCurrentYPos()
    {
    if (document.body && document.body.scrollTop)
    return document.body.scrollTop;
    if (document.documentElement && document.documentElement.scrollTop)
    return document.documentElement.scrollTop;
    if (window.pageYOffset)
    return window.pageYOffset;
    return 0;
    }
    function ss_addEvent(elm, evType, fn, useCapture)
    {
    if (elm.addEventListener)
    {
    elm.addEventListener(evType, fn, useCapture);
    return true;
    }
    else if (elm.attachEvent)
    {
    var r = elm.attachEvent("on"+evType, fn);
    return r;
    }
    }
    var ss_INTERVAL;
    var ss_STEPS = 25;
    ss_addEvent(window,"load",ss_fixAllLinks);
    Thanks.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •