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!

View Replies: View Best Answer
ronyDdeveloper replied on at Permalink Reply
ronyDdeveloper
bryanlewis replied on at Permalink Reply
bryanlewis
Thanks for the mention! I really appreciate it!
mhawke replied on at Permalink Best Answer Reply
mhawke
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>
Daisy1 replied on at Permalink Reply
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!
mhawke replied on at Permalink Reply
mhawke
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.
freestylemovement replied on at Permalink Reply
freestylemovement
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!
mhawke replied on at Permalink Reply
mhawke
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.
virtualgt replied on at Permalink Reply
virtualgt
Not a coder. Can't seem to get it to work. Keyboard still comes up on mobile devices.

Where does
type="button"
go in the code?

Thanks.
mhawke replied on at Permalink Reply
mhawke
It goes in the last line to define the < input > as a button.

<input type="button" id="scrollup" value="Go To Top">
virtualgt replied on at Permalink Reply
virtualgt
Thank you for the quick reply. Seems obvious now and works well.
kfog replied on at Permalink Reply
kfog
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
mhawke replied on at Permalink Reply
mhawke
That sounds like a caching issue. Can you clear your c5 cache and see what happens?
mhawke replied on at Permalink Reply
mhawke
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...
kfog replied on at Permalink Reply
kfog
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
kfog replied on at Permalink Reply
kfog
i added

z-index: 999999;

and tada ! i works.
thanks anyway
keith
mhawke replied on at Permalink Reply
mhawke
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.