Scroll smoothly to the bottom of the page

This works fine with a text link; how do we get it to trigger from an element such as an image or a button?

Select your image or button, and then use this URL as your ‘mouse click’ action:

#bottom

Daniel, I have attempted this, but it only snaps to the linked area, rather than smoothly scrolling.

1 Like

Hi I know this an old post but I am having the exact same problem trying to get smooth scrolling from an image rather than text. I can get it to work fine with text but have tried both ways suggested for an image and cannot get it to smooth scroll, just jump/snap to the area. if anyone can help I would very much appreciate it as I have little understanding of javascript.

1 Like

Any fix for the snap issue instead of smooth scroll?

1 Like

This works with images

scroll.hype.zip (70.5 KB)

Thank you, Chris. Your file works great but I can’t seem to copy&paste the query-1.10.1.min.js and query.scrollTo.min.js into my own project. Can you send those two scripts, please?

Thank you in advance!

Just copy these to lines to your Head HTML

Scroll To CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.0/jquery.scrollTo.min.js"></script>

JQuery 1.12 CDN:

<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>

or here they are zipped up

scripts.zip (35.3 KB)

just add them to your document’s resource window

1 Like

Thank you, DBear!

DBear, I added the scripts and timeline elements but no scroll occurs when top or bottom shapes are clicked. Would you look at my file?

You have too many links to the jQuery resources. Just need to delete the ones you are not using. Plus … your image that you are using for the scroll I assume is the one at the top? There is no clickable action on this image. Just add an action on mouse click to run your “ScrollToBottom” javascript function. It will then scroll to your #bottom anchor on click.

1 Like

I tried using the scroll.hype file to create a navigation that scrolls smoothly to each anchor but the liDBRPR.zip (2.0 MB)nks will only work if the anchors are below the previous anchor link clicked. Anyway the anchor points above current anchor point can scroll back upward to any other anchor point? I should note I’m using a fixed navigation. I’ve attached. You’ll notice the two GREEN BUTTONS are my testing navigation to two anchor points below.

Try this !

DBRPR.hype.zip (2.9 MB)

3 Likes

Chris2, you’re awesome! I appreciate your help. :smiley: Thanks!

Thanks the code worked great. However, this has created a different problem in my document because whenever I jump to a new scene, the new scene doesn’t appear from the top, rather it somehow jumps to around the 3000 px mark.

I do not know whether the code is directly responsible for this but any help would be appreciated!

Could you please post your hype file ?

Hi here is the hype file, thank you! :smile:

website1.hype.zip (996.4 KB)

If I leave the scaling (width) on, this is what I see :

I therefore turned it off.

Yet, I don’t see any scrolling involved in your file.

If you want to force your browser to go to the top you could use this snippet:

$(‘html, body’).animate({ scrollTop: 0 }, 0);

Yes it worked thank you!! :smile:

How can I make the same button to scroll to the bottom when we’re in the top and scroll to the top when we’re in the bottom?