[jQuery] When document scroll add html only once
On this page, http://www.webrichtlijnen.nl/, when scrolling down you
see that there will be added to arrows that are used to get back to
the top off the page.
I looked at the script and thought this could be made with jQuery a
lot easier.
At the moment I have this:
jQuery(function($) {
$(document).scroll(function() {
$('<div id="scroll_top"><a href="top" class="scroll_top_left">Naar
boven</a><a href="top" class="scroll_top_right">Naar boven</a></div>')
.appendTo('#canvas');
if (document.documentElement.scrollTop == 0) {
$('#scroll_top').hide();
}
});
});
This works good, the only thing I want is that <div id="scroll_top">
only added once and not everytime when I scroll. I also tried this but
when it's added and you get back to the top it won't be inserted
again.
jQuery(function($) {
$(document).one('scroll', function(event) {
$('<div id="scroll_top"><a href="top" class="scroll_top_left">Naar
boven</a><a href="top" class="scroll_top_right">Naar boven</a></div>')
.appendTo('#canvas');
if (document.documentElement.scrollTop == 0) {
$('#scroll_top').hide();
}
});
});
How could it be fixed that it works just the way I want?