Scroll smoothly to the bottom of the page

Using JavaScript with Hype
1

Hi,
jquery scroll function works with mouse but doesn’t work with buttons by clicking them. See attached file.
ThanksScroller.zip (89.5 KB)

3 Likes
6

A few ways to do this.

Super super minimalist Smooth Scrolling for the HTML page:

Add this to the head of your document. You can edit the contents of the <head>…</head> of your exported .html file by clicking on 'Edit HTML Head' in the Document Inspector.

html { scroll-behavior: smooth; }

Super Minimalist Smooth Scroller:

The super simple method is to animate to an anchor using plain Jquery:

Add this to the head of your document:

<script type="text/javascript" src="https://code.jquery.com/jquery-2.0.3.min.js"></script> 

$('html,body').animate({
scrollTop: $("#Bottom").offset().top
}, 800);

Here's this simple reduced example:

scroll-smoothly-jquery.zip (31.0 KB)

Handle all Anchor Links and smoothly scroll to them:

Another approach (better for adapting to a larger document with anchor links already setup) is to intercept any click to anchors and use only smooth scrolling:

First, add jQuery to the head of your document, and run this function 'On Scene Load' whenever you want to have smooth scrolling on a scene:

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

Set the Unique Element ID of an element to be something like bottom by selecting it and editing that field in the Identity Inspector. You can now link to it using the following format from the inner HTML of an element:

<a href="#bottom">Jump to the bottom element</a>

Here is an example:

smoothscrolling.zip (26.2 KB)

This technique was adapted from this article: https://css-tricks.com/snippets/jquery/smooth-scrolling/

9 Likes
7

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

8

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

#bottom

9

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

1 Like
10

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
12

Any fix for the snap issue instead of smooth scroll?

1 Like
13

This works with images

scroll.hype.zip (70.5 KB)

14

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!

15

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
16

Thank you, DBear!

17

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?

18

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
20

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.

21

Try this !

DBRPR.hype.zip (2.9 MB)

3 Likes
22

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

23

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!

24

Could you please post your hype file ?

25

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

website1.hype.zip (996.4 KB)

26

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);