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

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

javascript jquery css

Javascript jQuery淡入淡出“；“返回顶部”；链接页面加载链接可见性,javascript,jquery,css,scrolltop,Javascript,Jquery,Css,Scrolltop,我正在尝试实现一个“返回顶部”链接，一旦用户向下滚动页面一定数量，该链接就会在我的页面上消失我注意到，在我的一些页面上，“返回顶部”链接会在页面上闪烁，然后隐藏自己，但在其他页面上不会。为了追踪“链接闪现”的原因，我创建了一个JS提琴供您查看我的编码，并希望找到导致不一致的原因。JS小提琴本身似乎工作正常，但这可能只是因为它在小提琴中。可能会有一行代码我可以添加，以确保链接是隐藏的负载谢谢你花时间看这个。非常感谢 HTML jQuery $(document).ready(function

我正在尝试实现一个“返回顶部”链接，一旦用户向下滚动页面一定数量，该链接就会在我的页面上消失

我注意到，在我的一些页面上，“返回顶部”链接会在页面上闪烁，然后隐藏自己，但在其他页面上不会。为了追踪“链接闪现”的原因，我创建了一个JS提琴供您查看我的编码，并希望找到导致不一致的原因。JS小提琴本身似乎工作正常，但这可能只是因为它在小提琴中。可能会有一行代码我可以添加，以确保链接是隐藏的负载

谢谢你花时间看这个。非常感谢

HTML

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;
        });
    });

});

我测试了下面的代码，它工作正常

   <!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>


$（文档）.ready（函数（）{
//藏起来#先放在后面
$（“#后顶”）.hide（）；
//淡入式#后车顶
$（函数（）{
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>500）{
$（“#后顶”）.fadeIn（）；
}否则{
$（“#后顶”）.fadeOut（）；
}
});
//单击可将正文滚动到0px
$（“#返回顶部a”）。单击（函数（）{
$（'body，html'）。设置动画({
滚动顶部：0
}, 800);
返回false；
});
});
});
#背面顶部{位置：固定；显示：无；底部：10px；左侧：10px；宽度：83px；}
#背面顶部跨距{宽度：83px；高度：94px；显示：块；背景色：红色；}
.container{高度：4000px；}
#背面a{宽度：83px；显示：块；颜色：白色；}
#背面a：活动{
颜色：白色；
}
测试内容

此代码在您的浏览器中工作？

发现了您的问题

您需要将CSS

#back-top{display:none}

一个在那里，但是它被你的媒体查询覆盖了。您需要一个更具体的选择器，仅用于显示

在

skin.css

中添加这一行，应该可以纠正错误：

p#back-top{display : none}

检查您的媒体查询是否仍然有效。如果没有，您也必须在查询中更加具体

现在，

.hide（）

正在隐藏您的按钮。因此，一旦你可以通过CSS隐藏按钮，你就可以删除这一行。

在FF 21.0中似乎很好WinXP在Linux上的Chrome 27中似乎也很好。OP说它可以在fiddle上使用，但在他的网站上不起作用，所以当然可以@亚历克斯·里特，你能发布你的不工作页面吗？@Karl AndréGagnon-Sure:它工作起来很有魅力！我只是想对你的解决方案说声谢谢。它在大多数页面上都有效，这是很奇怪的。有几个页面中的链接每次都会闪烁。您可以在

   <!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>

p#back-top{display : none}