Ambiera ForumDiscussions, Help and Support. |
|
|
|||||
|
Hi. I have a long page and need a grade 1 Dummies guide of how to create a 'go to top of page' . When I say 'dummies' I mean a real dummies guide !  . If possible some screen shots. Much appreciation to anyone that helps. |
||||
|
I guess you would like to have something similar to the Phone button I have placed on this page. https://weingutschickjugenheim.d... In this example clicking the button will open the phone app but you can also make it a back-to-top button. It will always be in reach and visible, no matter of the scroll position. Here is how: -> Drag a Named Anchor somewhere to the top of your page. If you don't style it won't be visible. -> Give it the name "top" -> Drag a Styled Button somewhere onto your page and style it as you like. Insert the text "top of page" or something like that. -> Right-click the button -> Select "HTML Code ..." -> Select "Additional CSS styles" -> Insert this code, with a blank before and after position: fixed; z-index: 100; top: 65vh; -> Click "OK" -> Again, right-click the button -> Select "Insert Hyperlink" -> Select "Page in this project" -> Select the named anchor -> Click "OK" The code string top: 65vh;causes the browser to display the button at a height of 65% of the viewport height. Try alternative entries to make it fit your page layout, but be sure the height is appropriate for small mobile devices too. I don't have screenshots on hand but you can check my tutorial on Fixed Containers (at the end of page) https://4hundert.de/rctips/fixed... And as icing on the cake, you can make your page scroll back to top smoothly rather than just jump. See my tutorial on Smooth Scrolling https://4hundert.de/rctips/smoot... |
||||
|
Thank you micaelo. the button works but does not appear where I set it at the bottom of the page. it appears about a third way down from the top. I thiunk this will annoy viewers. Is there an easy way to hard set it in a fixed position? |
||||
|
Try bottom: 0;instaed of top: 65vh; |
||||
|
Thanks micaelo, but the button is still 'floating' in the center of screen. I want it to be static like an image at the bottom of the page. |
||||
|
bottom: 0;should work. Check for typos! |
||||
|
Thank you. Works now. I have one more question (it's my first time using the app) ... There is a rogue '>' at the top of the page. i can see it in the html code but I can't delete it. I edited it out in an external text editor and saved the page but when I reopen RocketCake the '>' is still there. I have the registerd version. Is there an easy way to edit and save HTML in the app? |
||||
|
Sorry - ignore last request. I can edit now and fixed the >. Thank you very much for your help. I really appreciate it. Cheers, Jackson. |
||||
|
|
){kind=link}