我正在尝试实现一个“返回页首”链接,一旦用户向下滚动页面一定数量,该链接就会淡入我的页面.

我已经注意到,在我的某些页面上,“返回页首”链接将在隐藏自身之前在页面上闪烁,但在其他页面上则不会.为了找出“链接闪烁”的原因,我创建了一个JS小提琴供您查看我的编码,并希望找出导致不一致的原因. JS小提琴本身似乎工作正常,但这可能只是因为它在小提琴中.我是否可以添加一行代码来确保链接在加载时被隐藏？

感谢您抽出宝贵的时间查看此内容.非常感谢.

http://jsfiddle.net/uLUWV/

的HTML

<div class="container">
Test Content
</div>    
<p id="back-top"><a href="#top"><span>Go To Top</span></a></p>

的CSS

#back-top {position: fixed; display:none; bottom:10px; left:10px; width:83px;}
#back-top a {width: 83px; display: block;}
#back-top span {width: 83px; height: 94px; display: block; background-color:red;}

.container {height:4000px;}

jQuery的

$(document).ready(function(){

    // hide #back-top first
    $("#back-top").hide();

    // fade in #back-top
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 500) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });

        // scroll body to 0px on click
        $('#back-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });

});

解决方法:

发现您的问题.

您需要放入CSS#back-top {display：none}.

一个在那里,但是它被您的媒体查询所覆盖.您只需要一个用于显示的特定选择器.

在skin.css中添加此行,它应该纠正错误：

p#back-top{display : none}

之后检查您的媒体查询是否仍然有效.如果否,那么您在查询中也必须更加具体.

现在,.hide()隐藏了您的按钮.因此,一旦您可以通过CSS隐藏按钮,就可以删除此行.