How was this scroll technique created?

[macaddict23]

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?

 

[hobbbz]

Looks like he did it using +U

 

[macaddict23]

Using what now? Sorry.

 

[hobbbz]

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.

 

[macaddict23]

That's if you're using Firefox. With Safari, it's Option + + U

;-)

 

[dejo]

For the scrolling, simply done using the <a> link in conjunction with the <a> anchor.

<a href="#here">

<a name="here" id="here">

 

[Sdashiki]

For the scrolling, simply done using the <a> link in conjunction with the <a> anchor.

<a href="#here">

<a name="here" id="here">

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

its an anchor link with obvious javascript effects.

 

[angelwatt]

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.