Animated scroll to anchor

**yoquiltrucci** · 16 July 2011, 04:39 PM

Hello

Is there any way to create a smooth scroll effect to any anchored object?

I woould like to create an effect like the one used here http://www.dannyblackman.com/
click on the Previous and next buttons... thats what i need.

**gwpriester** · 16 July 2011, 05:56 PM

I think Danny wrote a Flash script to do that. It is a very creative site and I hope someone gives Danny a job. He is very talented.

In Web Designer 7 or Designer Pro 7 you can use Transition Effects to have a page or layer scroll in to or out of the page. If you have one of these two products, do a Help > Index search for Transitions.

You can also create a "Presentation" site that uses Transitions See this example here http://www.xaraxone.com/webxealot/wo.../presentation/ Every time you click a an arrow button the next effect (transition) happens. This could be new layers or pages sliding in instead of lines of text.

**yoquiltrucci** · 16 July 2011, 06:25 PM

but i cannot replicate the exact effect as the link i posted http://www.dannyblackman.com/.

Is there any way i can use jquery with Xara Web Designer 7 premium?

Also, could you please post the link of what Danny wrote?

thank you

**ShapeShifter** · 16 July 2011, 09:26 PM

This is done with mootools.js and mooscroll.js plus a javascript script relative to each named div on the page.
If you view the source and scroll to the foot of the source age you will see this.
It should be possible in Xara if you follow the lead from that source.

**yoquiltrucci** · 16 July 2011, 09:59 PM

could you please show me how?

**ShapeShifter** · 16 July 2011, 10:08 PM

You will have to get copies of the mootools and mooscroll js first and reference these in a head placeholder.

Each button must have a unique name applied which gives the DIV it's 'ID'
The the script which activate this must have an entry for each of the divs;
eg:

The DandSD Nav section has the 'Next' button div named work2.
So the script code for this button is:

// DandAD Nav
$('next_btn1').addEvent('click', function(){
skroll.toElement('work2');
});

If you're not sure about named objects, how to embed scripts using placheolders or how to reference external *.js see the Xara help file for more.

Good luck

**yoquiltrucci** · 16 July 2011, 10:27 PM

thank you for your answer. I'll give it a try and let you kwno my progress.

**gwpriester** · 17 July 2011, 12:17 AM

Head placeholder as in the Replace with HTML code (head) area.

Great resource as always, SS.

**yoquiltrucci** · 17 July 2011, 12:53 PM

I've already tried this:
1. Calling mootools on the <head> via Web Page Propierties > Page > HTML code insertion <head>.
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/mooscroll.js"></script>
2. I know that the the script which activate this must have an entry for each of the divs;
3. So the script is
// DandAD Nav
$('next_btn1').addEvent('click', function(){
skroll.toElement('work2');
});
4. put names to the button and to any other object so it acts like anchor.
5. where i am totally lost is that i tried to put this script to a button in the link URL, to a placeholder, another HTML insertion code and i just couln't make this work.