How was this scroll technique created?

Discussion in 'Web Design and Development' started by macaddict23, Jun 24, 2008.

  1. macaddict23 macrumors 6502

    macaddict23

    Joined:
    Jun 20, 2006
    Location:
    MacVille, USA
    #1
    Visit http://www.clematis.org/learn/faqs

    If you click on any of the FAQ on the right column, the page scrolls down to the answer. Also, notice how the question flashes briefly with a yellow background? Nice. Any clues?
     
  2. hobbbz macrumors 6502a

    hobbbz

    Joined:
    Mar 8, 2005
  3. macaddict23 thread starter macrumors 6502

    macaddict23

    Joined:
    Jun 20, 2006
    Location:
    MacVille, USA
  4. hobbbz macrumors 6502a

    hobbbz

    Joined:
    Mar 8, 2005
    #4
    It was a joke but you can't read sarcasm on the internet. +U shows the source of a page. using that you can find out what code he used to achieve the effect.
     
  5. macaddict23 thread starter macrumors 6502

    macaddict23

    Joined:
    Jun 20, 2006
    Location:
    MacVille, USA
    #5
    That's if you're using Firefox. With Safari, it's Option + :apple: + U

    ;-)
     
  6. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #6
    For the scrolling, simply done using the <a> link in conjunction with the <a> anchor.
    Code:
    <a href="#here">
    
    <a name="here" id="here">
     
  7. Sdashiki macrumors 68040

    Sdashiki

    Joined:
    Aug 11, 2005
    Location:
    Behind the lens
    #7
    i doubt thats all seeing as how:

    <script src="/javascripts/application.js?1178851279" type="text/javascript"></script>
    <script src="/javascripts/prototype.js?1178851279" type="text/javascript"></script>
    <script src="/javascripts/scriptaculous.js?1178851279" type="text/javascript"></script>

    is in the head


    and


    <a href="#" onclick="new Effect.ScrollTo("wrapper",{});; return false;">

    is within the code.

    glad to see people in the topic practicing what they preach :rolleyes:

    its an anchor link with obvious javascript effects.
     
  8. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    If you check the top of the source code, the page links to the JavaScript frameworks Prototype and Scriptaculous. Not sure which specifically he used for the effect, but it's a pretty easy to do thing. I agree it's a nice effect though, might create my own for my site.

    One downfall of the technique (as implemented) is that it breaks when the visitor has JavaScript disabled. It's an easy fix though is he used proper anchors. People all too often forget to code for accessibility.

    Edit: I followed my own advice and wrote my own script (Gentle Anchors) for this behavior, it can be seen here for those interested.
     

Share This Page