Smooth Scroll to Link with Anchor

[MushroomInternet]

Hi,

I having the following code working on a HTML5 canvas animation:

stage.enableMouseOver(25);

this.movieclip.cursor = "pointer";

this.movieclip.addEventListener("click", ScrollToAnchor);

function ScrollToAnchor() {

  window.open("http://websitedomain.com#anchorname", "_self");

}

I would like to set up the page to smoothly scroll down to the anchor on the current page when a movieclip is clicked on at the top of the page. Is this possible? If so, please can someone point me in the right direction?

Kind regards,

Peter

[ClayUUID]

This is not an Animate question, it's a general HTML/JavaScript question.

Pasting the title of this thread into Google yields many possible solutions.

[MushroomInternet]

Hi ClayUUID,

I have tried various Javascript code snippets to make scrolling to an anchor smooth but because the hyperlink snippet I'm using, as shown above, is within a HTML5 canvas it doesn't pick it up which is why I am looking for other suggestions.

Kind regards,

Peter

[Colin Holgate]

Is the canvas tall enough that it includes the initial button and the content of the anchor point? Is the whole experience all that exists in the window? Do you want the user to be able to use the window scroll bars as another way to get to the anchor point?

[MushroomInternet]

Hi Colin,

Initially the canvas is full screen (height and width) with the anchor points and text underneath. When scrolled from the top of the page the canvas then shrinks to a height of roughly a third of the screen size and is fixed at the top. The scroll bars are active and can be used as an alternative scrolling method too. On the canvas there are 7 images which are linked using the original code snippet that I provided with their own unique anchor points in the content that is further down the page all of which I would like to use a "smooth scroll" effect if possible.

Kind regards,

Peter

[Colin Holgate]

I can't really take the time to set up an example of what I'm thinking, so I'll describe it, in the hope that it seems like it might work:

Imagine your canvas is as tall as all of the content of the page.

In the lower parts of the page you want the heading to be shrunk, other things to appear, and some things to animate when they are visible.

You could create the variations of the experience as a timeline animation. On frame 1 the header would be full size, with an animation it gets shrunk by say frame 30. As you go to later frames/anchor points, other things tween in, or start to animate.

With such a timeline, and a canvas that tall, you could go to frame you want, and set the scroll of the window. When someone clicks on the button you would set the scroll of the window to be the right value for that anchor point, and in the Animate canvas you would tween to the related frame.

So, always you would set the scroll of the window, and regardless of whether the user scrolled there, or your button jumped there, the timeline would tween to the right frame.

[MushroomInternet]

Hi Colin,

I think it may be easier to explain if I show you a live example of what I have so far. Please find the link below to the development site that I am working on which contains the canvas in questions:

newlyecross.dev.sosdc.co.uk

You will notice that when you hover over the buildings shown on screen that a pin pops up which is linked to an anchor further down the page. What I want to occur is that when this link is clicked the user is scrolled smoothly to the anchor further down the page instead of being "jumped" straight to it.

Hopefully that has cleared things up a little.

Kind regards,

Peter

[Colin Holgate]

In your functions that reload the page, you're reloading the page before removing the listener, which is leading to errors. Switch the two lines around, so you're removing the listener first.

Or, find a way to get what you want without a page reload. Could you use window.scrollBy(0,anchorY); as a way to force the window to scroll to the desired anchor? 'anchorY' would be the Y value of whatever anchor you're heading for. That scroll could be done using a tween, that is calling a function that repeatedly does another scrollBy(). The tween duration could be the same, say 1 second, that way it doesn't take any longer to get to something very low on the page.