Jquery .scroll display:none; not working

CSS

#acc-close-all, #to-top {
    position: relative;
    left: 951px;
    width: 29px;
    height: 42px;
    margin-bottom: 2px;
    display:none;
}

#acc-close-all a, #to-top a {
    position: absolute;
    float: right;
    display: block;
    height: 42px;
    width: 29px;
    overflow: hidden;
    display:none;
    cursor: pointer;
}

HTML

<div id="acc-close-all">
    <a title="Close all open tabs"><!----></a>
</div>
<div id="to-top">
    <a title="Back to top"><!----></a>
</div>

jQuery

// Scroll close all and bcak to top buttons with the page
$(window).scroll(function() {
    var top = $(this).scrollTop();
    $('#acc-close-all a, #to-top a').css('top', top + "px").css("display", "inline");
}开发者_JAVA技巧);

I would like these tabs to fadeIn slowly when the user scrolls down the page and fade up when the user is near the top.

I can get it to work without the display:none and display:inline but it just doesn't show up when the user scrolls down the page. I've read this http://api.jquery.com/scroll/ but still can't get it to work.

NB: The page is only scrollable when the accordion is opened. Yes more than one accordion can be opened at any one time.

The reason you're not seeing your links appear onscroll is because their parent containers (#acc-close-all and #to-top) are also set to display: none and never set visible on scroll. You can change the CSS as follows to fix the issue:

#acc-close-all, #to-top {
    position: relative;
    left: 951px;
    width: 29px;
    height: 42px;
    margin-bottom: 2px;
}

Alternatively you could set both parent containers to display: block in your scroll event handler.

Here's a simplified example with it working.