[Pro] Smooth Scrolling with Prototype/Scriptaculous

Legacy Dynamo
1

Here’s a little snippet to paste into Protaculous to enable smooth scrolling down to anchors on your page.

  1. Apply Protaculous to the page, and choose scriptaculous-packed from the library menu.

  2. Click on the top Function Body button, and paste in the following:

var anchors = $$('a');
anchors.each(function(elm){
    var ref = elm.href.split(/#/).last();
    var t = (ref) ? $(ref) || anchors.find(function(em){ return (em.name && em.name == ref); }).up() : false;
    if(t){
        elm.observe('click',function(evt){
            evt.stop();
            Effect.ScrollTo(t);
        });
    }
});

There is no step 3.

This works around the differences between HTML 4 and XHTML, finding the anchor’s target by ID if you’re in XHTML, and by name if not.

Walter

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Hi Walter

Can you just clarify that the web hasn’t scrambled this slightly coz it aint working for me

var anchors = $$('a');
anchors.each(function(elm){
    var ref = elm.href.split(/#/).last();
    var t = (ref) ? $(ref) || anchors.find(function(em){ return (em.name && em.name == ref); }).up() : false;
    if(t){
        elm.observe('click',function(evt){
            evt.stop();
            Effect.ScrollTo(t);
        });
    }
});

David

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Could you post a link to a broken version? I can’t see any difference between what I posted and what you did.

Walter

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

I’m guessing that what’s happening is an artifact of how you are laying out the page. I just tried this again, copying and pasting from your mail message, and using a page containing a single large HTML box.

Within that box, I added three anchors (#one, #two, #three) by selecting the first word of three different paragraphs and adding the anchor to them.

At the top of the page, I added the text one | two | three, and used Freeway’s linking tool (the globe at the bottom of the window) to link to my named anchors.

Clicking on any of these links causes the page to scroll smoothly down in the browser window to that anchor.

Walter

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

My page has a single Top anchor with a couple of links down the page.

http://www.curecancerscotland.org/golf.html

D

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Okay, take the up() out of this line:

var t = (ref) ? $(ref) || anchors.find(function(em){ return (em.name

&& em.name == ref); }).up() : false;

so it reads

var t = (ref) ? $(ref) || anchors.find(function(em){ return (em.name

&& em.name == ref); }) : false;

And that should do it for you.

Walter

On May 31, 2010, at 7:40 PM, DeltaDave wrote:

My page has a single Top anchor with a couple of links down the page.

http://www.curecancerscotland.org/golf.html

D

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Thanks Walter

That did the trick - but was that a page specific fix or a general one.

What was the ‘up’ actually doing in that context?

D

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

That was an artifact from something else I tried, getting the anchor’s parent paragraph and highlighting it when the scroll was done. So this is a general fix, and you’re not missing anything.

Walter

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options