Back to top link
Permalink 2 users found helpful
Hi there, is there a way to link back to the top of a page when you're at the bottom of a long page? I'm not a programmer :) Thanks in advance for any advice!
Thanks for the mention! I really appreciate it!
For a DIY widget, try adding a HTML block anywhere on your page and pasting this code into it. Make sure you expand the code window to copy all the code.
<script type="text/javascript"> $(document).ready(function(){ $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $('#scrollup').fadeIn(); } else { $('#scrollup').fadeOut(); } }); $('#scrollup').click(function(){ $("html, body").animate({ scrollTop: 0 }, 600); return false; }); }); </script>
Viewing 15 lines of 36 lines. View entire code block.
Thanks so much mhawke. This is effective and accomplishes a simple button. I didn't realize there would not be a basic command to do this right in the program - seems it should be part of the program, no? Was hoping to find a link that didn't require extra HTML language, but sadly it appears there is no such thing. Thanks again for your quick response!
Glad I could help.
Not everyone wants this button to show up so it's not built in.
As for hoping to find a solution that doesn't involve HTML, well I guess you have to speak the language the browser understands and that language is HTML. When in Rome...
If you want it available in an easier form, Go to Dashboard->Stacks and create a new stack called 'Go To Top'. Add an HTML block to that stack and paste the code above into it and approve the changes.
Now whenever you want this button to show up on a page, just edit any area and choose 'Add a Stack' instead of a block. Find your 'Go To Top' stack in the list and your done. It doesn't matter what area you choose.
If you want this button to show up on every page without manually inserting it, here's how to do that. Put your page in edit mode and look near the top (or bottom) for any area that says 'Add to SITEWIDE Area Name'. Go to Dashboard->Stacks and find a stack by that name in the top section of the Stacks list. Edit this stack by adding an HTML block to it and paste the code above in and approve the changes.
Now the button will show up on every page and you can't stop it from showing up. If you do this remember to remove it from the 'Add header content' on the pages where you had manually added it before.
Not everyone wants this button to show up so it's not built in.
As for hoping to find a solution that doesn't involve HTML, well I guess you have to speak the language the browser understands and that language is HTML. When in Rome...
If you want it available in an easier form, Go to Dashboard->Stacks and create a new stack called 'Go To Top'. Add an HTML block to that stack and paste the code above into it and approve the changes.
Now whenever you want this button to show up on a page, just edit any area and choose 'Add a Stack' instead of a block. Find your 'Go To Top' stack in the list and your done. It doesn't matter what area you choose.
If you want this button to show up on every page without manually inserting it, here's how to do that. Put your page in edit mode and look near the top (or bottom) for any area that says 'Add to SITEWIDE Area Name'. Go to Dashboard->Stacks and find a stack by that name in the top section of the Stacks list. Edit this stack by adding an HTML block to it and paste the code above in and approve the changes.
Now the button will show up on every page and you can't stop it from showing up. If you do this remember to remove it from the 'Add header content' on the pages where you had manually added it before.
Thanks MHawke!
For everyone's reference, I added 'type="button"' to make sure that the text input field didn't come up. this was especially important using any mobile device, where the keyboard would usually pop up in the middle of browsing.
thanks again!
For everyone's reference, I added 'type="button"' to make sure that the text input field didn't come up. this was especially important using any mobile device, where the keyboard would usually pop up in the middle of browsing.
thanks again!
Nice fix and good timing. I needed this for a client today and I had to come back to the forums for my own code! My wife is the organized one.
Not a coder. Can't seem to get it to work. Keyboard still comes up on mobile devices.
Where does go in the code?
Thanks.
Where does
type="button"
Thanks.
It goes in the last line to define the < input > as a button.
<input type="button" id="scrollup" value="Go To Top">
Thank you for the quick reply. Seems obvious now and works well.
hello mhawke, thanks for the instructions. – really simple.
i don't know if this works only in version5.6.
i tried it in 5.7.3 and only the button shows in its correct position but without scrolling up.
in edit mode, it works fully though.
thanks for your input.
keith
i don't know if this works only in version5.6.
i tried it in 5.7.3 and only the button shows in its correct position but without scrolling up.
in edit mode, it works fully though.
thanks for your input.
keith
That sounds like a caching issue. Can you clear your c5 cache and see what happens?
Also, make sure you've 'Published' the page so the saved version is available to the public.
It works for me on a 5.7 test site.
http://screencast-o-matic.com/watch/con6oFek4e...
It works for me on a 5.7 test site.
http://screencast-o-matic.com/watch/con6oFek4e...
mhawke thanks,
i use newest firefox and safari (mac) on a site with "elemental" theme.
it shows, but does not go to top. no change of cursor.
as long as logged in: all fine.
i check if i find an error somewhere.
keith
i use newest firefox and safari (mac) on a site with "elemental" theme.
it shows, but does not go to top. no change of cursor.
as long as logged in: all fine.
i check if i find an error somewhere.
keith
i added
z-index: 999999;
and tada ! i works.
thanks anyway
keith
z-index: 999999;
and tada ! i works.
thanks anyway
keith
Ah yes. That is sometimes needed. I guess that would depend on where on the page you chose to add the HTML block and what other content is on the page, particularly YouTube videos which often trump other elements.
rony