Thank you very much!
This has solved my problem… I’ve made a symbol with a drawer menu animation after clicking on the button that is always showing and fixed on the bottom of my windows browser thanks to your code.
I am not into java so I have now idea how your code works with so many “Top” mentions instead of “Bottom”.
Anyway… it is working fine for me… Thanks a lot…
Hi Jim!
Your solution seems more adapted to a back to top button, and I was looking for something fixed in a specific place of the page, always visible and floating to serve as a drawer menu… The approach from MarkHunt seems to work fine on my project…
Wish Hype had an easier way to create all sorts of floating buttons. Or a set of JS files available on the resources area for each kind of floating button ( drawer menus, social sharing, back to top…).
Thanks for taking your time and giving me advice so quick…
All the best,
Fábio.
The reason I wrote the post was to explain what was going on in the code so You at least understood what was happening, as previously You indicated:
I did not understand the solution given by JimScott.
Thank Jim,
I got the main thing, but I am too far from even the basics of javascript so some stuff I don’t get is due to my ignorance on the subject.
Anyway it is awesome for a non coder designer like me, to be supported by people like you guys on this forum.
All the best,
Fabio.
Envoyé de mon smartphone.
Veuillez m’excuser pour les éventuelles erreurs de frappe.
Just wanted to jump in here, Mark, and say that’s a hell of a fun little floating-button function.
Hi @MarkHunte,
Thanks , and It is really great.
I have problem to integrate it into my completed Hype projects, and I read Javascripts at https://tumult.com/hype/documentation/3.0/#javascript, and lots of posts, and still have several questions:
1#I found there is a file named: jquery.min.js in your hype template file:
and I already copied this line into my project by head html, but still does not show up:
<!-- Files added by the Resource Library -->
<script type="text/javascript" src="${resourcesFolderName}/jquery.min.js"></script>
So, how to import jquery.min.js to my hype project please?
2# I am still confused upon how to make your Javascript works with a button, I mean I did not find any custom definition with that button.
For example, what about if I add another one button or element and make it work with your javascript, where should I define it? I mean in your following codes:
/* force a scroll to activate on sceneload */
//$("html, body").animate({scrollTop: 2});
//$("html, body").animate({scrollTop: 0});
//-- add event listner
$(document).ready(function(){
-- listen for scroll
window.addEventListener("scroll", scollto );
-- listen for window resize
window.onresize = scollto;
function scollto() {
hypeDocument.setElementProperty(tButton, 'top', $(window).scrollTop() + window.innerHeight - 36)
};
3# By the way, the button will quake a lot when the elements moves by, is that right? anyway to make it quiet please?
Thanks
Alex
Are you able to post an example project of where you are at and what you setup is?
Hi @MarkHunte,
Thanks, please check sample hype file.
stickmenutest.hype.zip (42.9 KB)
BTW, please allow me explain what I want to do:
I have more than twenties webpages which was build by Hype, and several webpages are quite long with more than 20,000 pixel, so I am just planning to divide them into one primary scene and several sub scenes, or alternatively, divided into several sub pages(if it is too slow to load because it is too large), so that users will be redirected to sub scenes or sub pages, and could be redirect back by click that stick button which we are discussed now.
Thanks.
Hi @MarkHunte,
I upload your template project to our site, but the button does not show up, would you please check at: https://www.lovcour.com/scroll-test
but there is no any errors:
Thanks
Alex
Ok I have adjust the code a bit for you.
The jitter is normal and the way you would get rid of it is to not do things fast. We slow the move down so the buttons float to the new position slowly or we hide the buttons when scrolling and show them again after scroll has stopped.
A simple timeout can be set have a handler to move and show the button. But if a new scroll happens before the timeout fires. the timeout is canceled and a new one starts… this goes on until scrolling really has stopped and the timeout can complete it’s handler.
We then move the buttons and show them.
New code.
Also since we are using Jquery we use it to iterate over each button.
Each button is given the class Name of tButton which it uses to find them.
/* force a scroll to activate on sceneload */
$("html, body").animate({scrollTop: 2});
$("html, body").animate({scrollTop: 0});
//-- add event listner
$(document).ready(function(){
//-- listen for scroll
window.addEventListener("scroll", scollto );
//-- listen for window resize
window.onresize = scollto;
var isScrolling;
function scollto() {
$( ".tButton" ).each(function() {
var tButton_ = $( this )[0]
// Hide buttons
hypeDocument.setElementProperty(tButton_, 'opacity', 0)
});
// Clear our timeout throughout the scroll
window.clearTimeout( isScrolling );
// Set a timeout to run after scrolling ends
isScrolling = setTimeout(function() {
// Run the callback
$( ".tButton" ).each(function() {
var tButton_ = $( this )[0]
// Move buttons & show them when scroll has finished
hypeDocument.setElementProperty(tButton_, 'top', $(window).scrollTop() + window.innerHeight - 36 )
hypeDocument.setElementProperty(tButton_, 'opacity', 1)
});
}, 500);
};
});
stickmenutest_mhv1.hype.zip (47.4 KB)
Now saying all of the above I know you will have more questions. The code above is simple but also not vanilla Javascript. And from what I can tell you are not understanding the fundamentals of Javascript or using it in Hype.
Not a negative criticism , just saying for you to really move along you need to maybe take a step back and go over the basics in Javascript And then using Javascript in Hype will make much more sense.
Hi @MarkHunte,
Thanks.
Your are right, I am not good at JavaScript, From understanding, the name of tButton could be changed, right?
If I want to add more sticky buttons in one scene, I need to duplicate your JavaScript, and change the name of tButton, and make it run on scene load, right? But, still I do not know how to make that class name related to a specific button please?
This is a class name. yes it can be changed to a name that you choose.
Not really. we are using a class name on the buttons not an ID.
Think of it like this.
Classes.
You have two Cars.
Both Cars are; well CARS but each car is a different colour. One red and one blue.
Each Car has four wheels but one Car has 20 inch wheels and the other has 24 inch wheels.
But Both are Cars. Cars is the class of object. The same goes for the wheels. They have different attributes but both are classed as Wheels
Now we have a man called Jack Stevens who has been told to go and wash each Car in the car Park.
Jack Stevens, JS for short, does not care what colour the Cars are or how big the wheels are.
All JS is concerned about is that he follow the instructions, goes to the Car park, finds each car and washes it.
So we have two objects with the class Car. And JS instructions to find all objects of class Car and do something to them.
IDS
The Car park does not only contain Cars. It also contains other vehicles (objects ) Like Motor Bikes, Cycles.
The next day the boss tells JS to go to the car park and find Bobs vehicle. The boss does not know what it is and needs a picture of it but it will have Bobs ID on it. Each person's vehicle get a unique ID so they can park it in the Car park.
JS goes to the Car park and looks for the ID, finds Bobs vehicle and takes a Picture of it for the boss.
So we have many objects in the car park but all of them have a single unique ID which allows us to find them alone and not mix them up with any other object that may be similar or have the same class.
--
So again, I gave each button a class name ( Identity Inspector )
and we are looking for all of them and running some instructions on each.
Oh, God! you are not only expert but also great story master, and you are the only one who make me fully understand JS 
Really great thanks.
To make sure it will work for me, I put something into scene and change one of button to be more recognized in mobile mode:
As screenshot show, it works fine in local, but the buttons still does not show up in Wordpress, FYR, I am using the HYPE official wordpress plugin at Tumult Hype Animations Wordpress Plugin
I deactivated any of optimization plugin to track this issue, but still can not fix it.
It would be highly appreciated if you or anyone could help here, please access this page for check at https://www.lovcour.com/scroll-test
and here is attached hype document, thanksstickmenutest_mhv1.hype.zip (55.4 KB)
Alex
It looks like you need to account for where the Hype scene’s top actually starts after your header.
You could try and deduct the header height also.
So instead of
hypeDocument.setElementProperty(tButton_, 'top', $(window).scrollTop() + window.innerHeight - 36 )
increase the minus ( - ) of the innerHight to a number that brings the buttons up
For example
hypeDocument.setElementProperty(tButton_, 'top', $(window).scrollTop() + window.innerHeight - 158 )
Great, you are absolutely right!
Thanks so much, have a nice day!
Alex
can we add ease on this ?
hypeDocument.setElementProperty(tButton_, 'opacity', 1)
four builtin easings ... but there's also the possibility to insert your own function.
no idea... 
I don't know how to code, lol..
hypeDocument.setElementProperty(tButton_, 'opacity', 1, 'easeinout')
not working, its just show up at sudden
$( ".tButton" ).each(function() {
var tButton_ = $( this )[0]
// Move buttons & show them when scroll has finished
hypeDocument.setElementProperty(tButton_, 'top', $(window).scrollTop() + window.innerHeight - 36)
hypeDocument.setElementProperty(tButton_, 'opacity', 1, 'easeinout')
}