change how quickly the page scrolls

[sam327]

I added some custom links to get to the reviews tab (by updating the href & class per the wiki). Functionality is right, but I'd like to make an update, and change the transition on this - Make it a little slower so it's a smooth scroll rather than a quick jump.

Is there a place to update this?

[vovayatsyuk]

Hi!

To make a smooth scrolling, remove easytabs-scroll class from your element,
to prevent automatic instant scrolling.

Now you should get a working link, that will activate tab but will not jump to it.

Then add the following javascript code:

document.observe('easytabs:afterActivate', function(e) {
    if (e.memo.tab === 'review_tabbed') { // review_tabbed - is the tab alias from backend
        Effect.ScrollTo(e.memo.content, {
            duration: 0.5, 
            offset: 0
        });
    }
});

Didn't test it yet, but I hope that I didn't make any mistake.

[sam327]

That doesn't quite work for me out of the box... But I'll poke at it a bit more. Can I drop the 'if' check to make it affect any/all custom links that I might add later?

Just realized that once I remove the easytab-scroll links, I can just use any scroll script to get to the right spot on the page. But I would prefer to edit the settings that are attached to that easytab-scroll attribute rather than adding new script.

[vovayatsyuk]

1. Yes, I think you can drop it.

2. The code, that scrolls the page to the tab, is located in eaytabs.js on line 123

   You can replace it with scriptaculous. For example:

   Effect.ScrollTo(visibleTab, {
       duration: 0.5, 
       offset: 0
   });

[vovayatsyuk]

I've just added ability to scroll with animation by adding easytabs-animate class.

See https://github.com/tmhub/easytabs/wiki#activate-and-scroll-to-tab-on-external-link-click