How to scroll down to an anchor ?

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

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!

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

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

Looks good, Herr.

Darrell

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

I don't get  a crash?

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

Darrell

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

Sorry,

DOWNLOAD

ScrollTopInDivNaviWorks.zip

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

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

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

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!