Jump to the bottom of the page

I’m working on a relative layout with a vertical design requiring manual scrolling of the browser. I’d like to include a button that will force the document to the bottom, working like a link to an anchor.

How is this done?

You would create an element, set its unique ID to be

bottom

and then create a ‘Mouse Click’ action to link to this:

#bottom

This will immediately jump to that element. If you wanted to do this smoothly, view this post: Scroll smoothly to the bottom of the page

2 Likes

I didn't know that you could do this so easily, thanks again Daniel.

you may like this library, easy setupsmoothScrolling.hype.zip (50.2 KB)

1 Like

thanx for your great hints all the time. this is always one step further for me.

If you wanted an action after the scroll was complete, you would add this at the end:

$('html,body').animate({
          scrollTop: target.offset().top
        }, 1000, function() {
            // Animation complete.
           switch (target) {
              case 'bottom':
                   hypeDocument.functions('function name to fire');
             break;
            case 'footer':
                   hypeDocument.functions('function name to fire');
             break; 
         }
  });

With this it means you can fire any action based on the scroll target. Does this help ?

1 Like

Insert a Button at the top of the window and an element at the bottom of the window. Give the bottom element an “ID” of (in this case) here. Set up a “Mouse Click” action on the button and select the “Go to URL…” action and use the ID as the link (in this case) #here - (NOTE: do not use the hashtag on the element ID)

link2bottom.hype.zip (11.1 KB)

1 Like

Andrew, what does the "break" do in javascript?

I forgot to say, if you wanted to use target as the id of the element, you would use this:

target[0].id

So the element by ID in full would be like this:

$('html,body').animate({
      scrollTop: target.offset().top
    }, 1000, function() {
        // Animation complete.
       switch (target[0].id) {
          case 'bottom':
               hypeDocument.functions('function name to fire');
         break;
        case 'footer':
               hypeDocument.functions('function name to fire');
         break; 
     }
  });

:smile:

break;

Is used in a switch statement which tells the browser this case is now complete. Switch is the same as an If statement, but used for multiple conditions.

So for an example, if you changed the above to an if, it would be more like this:

if(target[0].id == 'bottom') {
    Do something
} elseif(target[0].id == 'footer') {
   Do something else
}

Switch is just easier to read, and less coding :smile:

1 Like

Personally, I found Danials script to be smoother, albeit slightly, than the library one using Safari, not tested it on other browsers mind :smile:

Sorry. Beyond frustration here. I added the SmoothScroller script, changed the function name from untitled to smoothScroller, gave the banner the ID of top, selected the up button, set the script to run on mouse up, saved and tested but nothing happened.

As I am using relative layouts, I had to vary the ID for the target for each layout to top1, top2, etc. I duplicated the script for each layout, giving it the function name of smoothScroller1, smoothScroller2, etc. Within each copy I changed the following line to correspond to the ID of the target, e.g.:.

scrollTop: target.offset().top1

In the head HTML i pasted:

(0pen <) script type=“text/javascript” src=“http://code.jquery.com/jquery-2.0.3.min.js”></script (Close>)

It doesn’t work. What am I missing?

I really need to see the project to check whats happening. But also you only need to use the script once, and have a dynamic function that handles it for you.

1 Like

Did you add the jQuery Libraries?

–Did you add the jQuery Libraries?

Yes. In the comment it pasted as HTML. I’ve changed that for visibility.

Banner group is target. Script attached to arrow group at bottom.

TestVerticalScrollRelativeV2A.hype.zip (1.5 MB)

You have a number of issues, one being you have just copied and pasted the code, rather than alter the trigger. The code you are using is looking for a hyperlink, or <a>'tag. But you are using a button, so its not triggering. Also, you have no call on the group you want to scroll too, which if you are using a button, I would suggest either an ID, or class, so it knows where too scroll to.

This is the code you should be using on Button 1, of the iPhone layout:

 var target = $('#scroll_'+element.id);
 if (target.length) {
    $('html,body').animate({
      scrollTop: target.offset().top,        
      
    // this value sets the speed (1000 is 1 second)  
    }, 1000);
 }

The element I am targeting is an image, which I called scroll_pattsHozs.

I put an id on the button called pattsHozs

So the above code is telling the window what to scroll down too. I have no idea what the timelines are for, or the pauses, perhaps nothing to do with the scrolling part. But here is the project. I will be honest and say i found it a little odd in how it was structured, hence the delay, but the iPhone layout is what is used. Hope it helps:

scrollBlinds.hype.zip (1.5 MB)

1 Like

Andrew - I’ve been getting advice from multiple directions. I recognized that the code was for text and not an object and have been trying to get a script to work via a mouse up action, but I was missing some pieces. One person said that I should be able to achieve the scrolling with a single script that would work for all layouts but didn’t say how. Another was talking about a custom function. It is like a pile of puzzle pieces from three different puzzles and trying to figure out is real and what is a red herring and what the picture is supposed to look like.

I’ve done a ton of high-end scripting in the past on a professional basis but not with JS and not with Hype. There are some fundamentals I’m missing. I started out with the premise of creating a script that I would attach to an object that would move to 0,0 at a specific speed, triggered by a mouseUp. That’s pretty much what I’m getting, but the posts on the forum from various friendly and helpful folk have been disconnected. I’ve spent quite a few hours playing detective trying to piece everything together.

Unfortunately, the file you attached may be different than the final version you edited. It has the scripts but I’m not finding the objects that have these IDs and the buttons do not work.

I sincerely appreciate the amount of effort you have put into this. You have been extremely generous.

The file does not really matter, what you are looking for is a target, and gun. The target has to be something with an ID, as in an element ID, whether its text, object, picture. For example:

<img id="ScrollTop" src="" />
<a  id="ScrollTop" href=""></a>
<div id="ScrollTop"></div>

So no matter what the target is, so long as its a ID.

The next is the gun, or trigger. You can use the same as above to fire the code. But in Hype, you don’t need too if you are going to trigger it from an element in Hype, and use JS. The code above is for triggering.

Is does not matter what code you use, but you would have too have an ID for each layout as a target, for example:

<img id="iPad_ScrollTop" src="" />
<a  id="Desk_ScrollTop" href=""></a>
<div id="phone_ScrollTop"></div>

And the trigger for each layout would need to find the corresponding target. Hype loads all layouts out once, which is a shame, I would rather is looked at the screen size, and then loaded the layout required only. But due to this, you have to have ID’s that are unique.

Both cases, you have only copy and pasted the full code Daniel sent, which relies on the <a> tag to fire. But again, you do not need that in Hype, because the onClick, onMouseUp, etc is done for you on all elements / objects.

Place this code, as it is in a function from a click event, in your apps case is would be the arrow image.

 var target = $('#iPad_ScrollTop'); // ** Target Element
 if (target.length) {
    $('html,body').animate({
      scrollTop: target.offset().top,
    }, 1000);
 }

** The element you want to show, give an ID and enter it as the target.

Then you can add easing to make it scroll with different effects. Hope that helps :slight_smile: