Adobe Community: Message List - How to scroll down to an anchor ?

Re: How to scroll down to an anchor ?

forums_noreply@adobe.com — Wed, 12 Nov 2014 17:48:09 GMT

Is there a way to scroll to an element on the page outside of the Animate object? So for example if you had an animate object loaded into a page in an iframe and you wanted to click an a button inside the animate object having it scroll to an anchor tag on the page?

Something like....

sym.getSymbol("MYANIMATEBUTTON").click(function(){

sym.$('html,body').animate({'thepageanchorname' : 0},1000);

});

the above didn't work but gives you an idea of what I'm thinking.

Cheers!

Re: How to scroll down to an anchor ?

forums_noreply@adobe.com — Wed, 20 Aug 2014 14:40:04 GMT

Thanks buddy (Darrell) saved me time...was going crazy on such a simple solution. BIG UPS!

Re: How to scroll down to an anchor ?

forums_noreply@adobe.com — Tue, 09 Oct 2012 11:32:35 GMT

There is is enough space under point 3 (point 4 & 5). If you click on the button 3 first after the page has loaded, it goes right to the top. When you click first on button 2 and then button 3, it does not go right to the top.

And when I click on button 2 or 3 and then directly the same button again, the animation scrolls back to the first div.

There has to be somthing to stop this behavior.

guesmo

Re: How to scroll down to an anchor ?

forums_noreply@adobe.com — Tue, 09 Oct 2012 11:01:21 GMT

Three doesnt scroll to the top, because there is nothing below it.

If Nothing below it, hence there is nothing to 'scroll'.

Hope that makes sense.

Darrell

Re: How to scroll down to an anchor ?

forums_noreply@adobe.com — Tue, 09 Oct 2012 10:27:44 GMT

Sorry,

DOWNLOAD

ScrollTopInDivNaviWorks.zip

Re: How to scroll down to an anchor ?

forums_noreply@adobe.com — Tue, 09 Oct 2012 10:23:01 GMT

Now it works to click on an fix button and scroll to the expected div.

But if I clik on button 2 and finally on button three, the third div doesn´t scroll to the real Top. You can see the div, but it doesnt´t move to top.

So if you click different sequence react, the divs do not react the way it should

DEMO

scrollInDivNaviWorks

DOWNLOAD

scrollInDivNaviWorks.zip

Re: How to scroll down to an anchor ?

forums_noreply@adobe.com — Tue, 09 Oct 2012 09:58:46 GMT

I don't get a crash?

The additional movement is expected because, the second click recalculates the scrolltop value.

Darrell

Re: How to scroll down to an anchor ?

forums_noreply@adobe.com — Tue, 09 Oct 2012 07:29:32 GMT

But the third button doesn´t work.

And if I click a button twice, the is some movement I jutst don´t wont...

Thanks,

guesmo

Re: How to scroll down to an anchor ?

forums_noreply@adobe.com — Mon, 08 Oct 2012 17:44:43 GMT

Looks good, Herr.

Darrell

Re: How to scroll down to an anchor ?

forums_noreply@adobe.com — Mon, 08 Oct 2012 14:04:01 GMT

Thanks for this fast answer! It works great.

I just ment an externel navigation. if I use the script on fix buttons, it crashes after the third button.

DEMO

view the animation

DOWNLOAD

scrollTopInDivNavi.zip

Thanks,

guesmo

Re: How to scroll down to an anchor ?

forums_noreply@adobe.com — Fri, 05 Oct 2012 16:57:52 GMT

Hi Herr

Then you need to nest the elements into a parent div;

Set the parent div Visibility to 'hidden' from the Property Panel;

Then adjust the click handler target as follows

// Click Handler

var myDiv = sym.$("Rectangle");

myDiv.animate({scrollTop: element.offset().top}, "slow");

Preview sample.

Download sample.

Darrell

Re: How to scroll down to an anchor ?

forums_noreply@adobe.com — Fri, 05 Oct 2012 15:46:54 GMT

How can I scroll in a div, without moving the whole page?

When I click button A, B or C, i want to scroll to point to a, b or c through a mask and stand the rest remain.

Thank You!

Re: How to scroll down to an anchor ?

forums_noreply@adobe.com — Fri, 28 Sep 2012 05:40:17 GMT

Yes !

That's it !

Well thanks a lot, I was totally confused here...

It's perfectly working now

Yay !!

Re: How to scroll down to an anchor ?

forums_noreply@adobe.com — Thu, 27 Sep 2012 22:22:51 GMT

This sample goes without a plugin. It merely taps into the scrollTop() jQuery method.

See Sample: http://www.heathrowe.com/edge/scrolltop/scrollTop.html

On the sample page, I have 5 designated areas, nothing more than 5 'shapes'. Each one goes to another shape on the page, example 1>3, and so on. In the click event handler for any of the shapes, use the following:

////// Click Event ////////

////// Copy Code ///////

// Target the designated 'scroll to' element

var element = sym.$("Three");

// No Animation

//$(window).scrollTop(element.offset().top);

// With Animation
$('html,body').animate({scrollTop: element.offset().top}, "slow");

//////End Copy Code////

////////////////////////////

Download Sample: http://www.heathrowe.com/edge/scrolltop/scrollTop.zip

More on jquery scrollTop, offset() and animate()

Hope this helps

Darrell

Re: How to scroll down to an anchor ?

forums_noreply@adobe.com — Thu, 27 Sep 2012 20:52:52 GMT

Ok, so, I found some interesting things, yet it's far from being done !

First, I found that I can jump to a particular position quite easely with window.scrollTo(x,y);

But I really want the transition to be smooth.

So I found this jquery plugin : http://flesler.blogspot.fr/2007/10/jquerylocalscroll-10.html

with the demo here : http://demos.flesler.com/jquery/scrollTo/

And now it's been like 3 hours that I try to make it work.

I've seen that you can just paste jquery commands in edge, you have to use a special syntax but I don't get it.

I'm still trying to figure out how to initiate the plugin, how to triger the event when clicking on a button, and lastly, how to define exactly where the window should scroll precisely...

If someone would be kind enough to explain me how to make this plugin work, this would be an appreciated help...

Thanks a lot !

How to scroll down to an anchor ?

forums_noreply@adobe.com — Thu, 27 Sep 2012 09:28:37 GMT

Hi guys,

I've been working on this since yesterday...

Here'se the deal : I'm trying to make an interactive flowchart with Edge Animate.

The purpose is that users will click on buttons that will give them access to a new button.

When then Click, I want the page to automatically scroll down to the next button (smoothly if possible) like you can see on this exemple : http://sandbox.castersblues.com/infographic/landing.html

I want to click on button A then auto scroll to button B, then click and auto scroll to button C etc.

I tried many things from answers I found on internet, but I have'nt been able to apply them to my case.

So here are the questions :

- Is there a scrollTo fonction in Adobe Edge ?

- Is it possible to create an anchor in the document ?

- If I make a symbol, is the symbol's ID gonna be the anchor ? (I tried that but not working so far)

I tried the javascript as described here http://www.webmuse.co.uk/blog/jquery-plugin-to-animate-scrolling-to-anchor/

but wasn't able to make it work...

If you have any pieces of advice, that would be a great help for me !

Thanks everybody