Why is AJS.$(window).scroll() not firing in Confluence (5.10.3)? Edited

I am using HTML macro with below JS code. I want to display back-to-top icon on the right side but AJS.$(window).scroll() does not trigger after page is saved; hence, no back-to-top icon. However, the scroll triggers just fine in 'Preview' mode.

Any ideas as to why AJS.$(window).scroll() is not firing?

Also, how do you referecence external CCS? I added:

<link href="https://confluence.barcapint.com/download/attachments/511785924/top-style.css?api=v2" rel="stylesheet" title="default" type="text/css"></link>

but that doesn't work so instead I am injecting the CSS via JS - which works in in Preview mode. I tried CSS Macro to no avail. So how does one reference external CCS?

Thanks

NR

---------------------------------------------------------------------------------

<a href="#0" class="cd-top">top</a>
<script >
var link = '<link href="https://***.com/download/attachments/511785924/top-style.css?api=v2" rel="stylesheet" title="default" type="text/css" />'

AJS.$(document).ready(function($){
// browser window scroll (in pixels) after which the "back to top" link is shown
var offset = 300,
//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
offset_opacity = 1200,
//duration of the top scrolling animation (in ms)
scroll_top_duration = 700,
//grab the "back to top" link
$back_to_top = $('.cd-top');

AJS.$(window).bind("load", function() {
//alert("LOAD " + link );
$('head').append(link );

});
//hide or show the "back to top" link
AJS.$(window).scroll(function(){
( AJS.$(window).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
if( AJS.$(window).scrollTop() > offset_opacity ) {
$back_to_top.addClass('cd-fade-out');
}
});

//smooth scroll to top
$back_to_top.on('click', function(event){
event.preventDefault();
$('body,html').animate({
scrollTop: 0 ,
}, scroll_top_duration
);
});

});
</script>

 

 

2 answers

0 vote
Ann Worley Atlassian Team May 01, 2017

CSS can be added globally at Confluence Admin>(Look and Feel)>Stylesheet and on the space level at Space Tools>Look and Feel>Stylesheet.

I am not sure why the scroll does not work when you publish - hoping someone else will chime in.

I faced the same problem today and for me using:

 

AJS.$("#splitter-content").scroll(function () {...}); 

 

instead of

AJS.$(window).scroll(function(){..})

worked fine..

Suggest an answer

Log in or Sign up to answer
Atlassian Community Anniversary

Happy Anniversary, Atlassian Community!

This community is celebrating its one-year anniversary and Atlassian co-founder Mike Cannon-Brookes has all the feels.

Read more
Community showcase
Kesha Thillainayagam
Posted Friday in Confluence

We want to hear how your non-technical teams are using Confluence!

Hi Community! Kesha (kay-sha) from the Confluence marketing team here! Can you share stories with us on how your non-technical (think Marketing, Sales, HR, legal, etc.) teams are using Confluen...

292 views 11 10
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you