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

This widget could not be displayed.
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.

This widget could not be displayed.

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
Community showcase
Posted Monday in Confluence

Why start from scratch? Introducing four new templates for Confluence Cloud

Hi my Community friends!  For those who don't know me, I'm a product marketer on the Confluence Cloud team - nice to meet you! For those of you who do, you know that I've been all up in your Co...

297 views 2 4
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