logo标签列表

jQuery淡入淡出“返回顶部”链接。页面加载链接可见性

javascriptjquerycssscrolltop
3
我正在尝试实现一个“返回顶部”链接，当用户滚动页面一定量时，该链接会在页面上淡入。
我注意到在我的某些页面上，“返回顶部”链接会在隐藏之前在页面上闪烁，但在其他页面上不会。为了找出“链接闪烁”的原因，我为您创建了一个JS fiddle，希望您能查看我的代码，并找到不一致之处的原因。JS fiddle本身似乎正常工作，但这可能只是因为它在fiddle中。也许有一行代码可以添加以确保链接在加载时被隐藏吗？
感谢您抽出时间查看此问题。非常感谢。 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;
        });
    });

});
在FF 21.0 WinXP中看起来很正常。 - David Starkey
在Linux上，Chrome 27看起来也很好。 - Dan O
OP说它在fiddle上可以工作，但在他的网站上不能工作，所以当然它可以正常工作。@Alex Ritter，你能发布你的不工作页面吗？ - Karl-André Gagnon
@Karl-AndréGagnon 确定：http://temp.yandasmusic.com - Alex Ritter
它像魔法一样奏效了！只是想说谢谢你的解决方案。 - digoferra
2个回答
3

我发现了你的问题。

你需要在CSS中加入#back-top{display: none}。

有一个存在，但它被你的媒体查询覆盖了。你需要一个更具体的选择器来控制显示。

在skin.css中添加以下行应该可以解决这个问题：

p#back-top{display : none}

检查一下你的媒体查询是否还有效。如果无效，你需要在查询中更具体。

现在，你的按钮被.hide()隐藏了。所以，一旦你能通过CSS隐藏按钮，就可以删除这行代码。

1

我测试了以下代码，没有任何问题

   <!doctype html>
    <html> 
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(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;
                    });
                });

            });
    </script>
    <style type="text/css">
        #back-top {position: fixed; display:none; bottom:10px; left:10px; width:83px;}
    #back-top span {width: 83px; height: 94px; display: block; background-color:red;}

    .container {height:4000px;}

#back-top a {width: 83px; display: block;color: white;}
#back-top a:active {
color: white;
}
    </style>
    </head>
    <body>
    <div class="container">
    Test Content
    </div>    
    <p id="back-top"><a href="#top"><span>Go To Top</span></a></p>
    </body>
    </html>

这段代码在你的浏览器中可以运行吗？
它在大多数页面上都能正常运行，这就是它的奇怪之处。但有几个页面每次链接都会闪烁。您可以在http://temp.yandasmusic.com查看。 - Alex Ritter
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接