blog documentation FAQ followers forum marketplace services youtube

solved Scroll To Top Button not working on all the pages

The Jamroom Network » Forum » Using Jamroom » Page » Scroll To Top Button not working on all the pages
pch
@pch
8 years ago
328 posts
Hello,

I have followed the tutorial found here:

https://www.jamroom.net/the-jamroom-network/forum/suggestions/2152/back-to-top-scroll-to-top-button

I've added the code to meta.tpl and to the footer.tpl and the profil_footer.tpl.

I also added the following style code to my skin.css

.scrollup {
    width: 40px;
    height: 40px;
    opacity: 0.3;
    position: fixed;
    bottom: 10px;
    right: 10px;
    display: none;
    text-indent: -9999px;
    background: url('http://www.site.com/skins/myscustomskin/img/icon_top.png') no-repeat;
}

It works fine but works only on few pages like on the profile timeline, few admin pages. On many other pages like the home page,the audio page etc. It doesn't work (it doesn't show).

Am I missing something?

Thanks for helping
updated by @pch: 12/19/16 11:04:20AM
michael
@michael
8 years ago
7,714 posts
got an example URL of a page where it shows and where it doesnt show? thanks.
pch
@pch
8 years ago
328 posts
Hi Michael,

Our site is still under construction.

As recommended by Brian in the Tutorial, bellow is the code to add in the ready function in the meta.tpl:

$(window).scroll(function(){
    if ($(this).scrollTop() > 100) {
        $('.scrollup').fadeIn();
    } else {
        $('.scrollup').fadeOut();
    }
});

$('.scrollup').click(function(){
    $("html, body").animate({ scrollTop: 0 }, 600);
    return false;
});

After adding the code, the ready fonction looks like this:

{if isset($javascript_ready_function)}
<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;
});
{$javascript_ready_function}return true;
});
</script>
{/if}

Putting the code in the ready function in the meta.tpl works in few pages only (admin pages), only on pages where the ready function is called.

This is because other pages from the frontend like: index, profile, audio, video etc do not load the ready fonction in the meta tag.

Any help?

Thanks
SteveX
SteveX
@ultrajam
8 years ago
2,584 posts 
{if isset($javascript_ready_function)}
...
{/if}
Anything inside that condition will only show if $javascript_ready_function has a value.

Try putting your js outside of that, in it's own document ready function and in it's own script tags.


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
sekeri
sekeri
@ilker
8 years ago
334 posts
I think it should be standard by default for all skins :)
pch
@pch
8 years ago
328 posts
SteveX:
{if isset($javascript_ready_function)}
...
{/if}
Anything inside that condition will only show if $javascript_ready_function has a value.
Try putting your js outside of that, in it's own document ready function and in it's own script tags.

Hi ultrajam,

Thanks a lot for the clue and your help. It works.

I misunderstood the Brian's Tutorial. Maybe it was not that clear. That is why I was misled.

It says:

Quote: Add this to your meta.tpl in THE ready function:

So I've thought that the code should be added to the existing ready function in the meta.tpl

Maybe the tutorial should say:

Quote: Add this to your meta.tpl in A ready function:

'THE' vs 'A'

Following your suggestion, I've put this 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>

... and it works. The Scroll To Top Button shows on all the page now.

Please just confirm if the code is correct. Although it works I just want to make sure that I have done everything right.

Thanks a lot for your valuable help.
updated by @pch: 09/05/16 03:58:21AM
pch
@pch
8 years ago
328 posts
sekeri:
I think it should be standard by default for all skins

I couldn’t agree more ;)
pch
@pch
8 years ago
328 posts
Can someone just confirm me if the code I used above is correct.

Thanks.
SteveX
SteveX
@ultrajam
8 years ago
2,584 posts
pch:
Can someone just confirm me if the code I used above is correct.
Thanks.

I'd need to set up a test using your code to tell you if it works or not.

You already have that test on your system. Does it work?


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
pch
@pch
8 years ago
328 posts
Hi Steve,

As said in my other post, it works well. Thanks a lot for your help.

Although it works, as i slightly modified it, I just wanted to confirm with an advanced programmer/coder that the code structure is right (correct).

Hope it makes sense now :)

Once again, thanks
douglas
@douglas
8 years ago
2,790 posts
pch:
Hi Steve,
As said in my other post, it works well. Thanks a lot for your help.
Although it works, as i slightly modified it, I just wanted to confirm with an advanced programmer/coder that the code structure is right (correct).
Hope it makes sense now
Once again, thanks

Which skin are you trying to add this to?


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
pch
@pch
8 years ago
328 posts
Hi Douglas,

Thanks for your reply. I am using Elastic.

Tags