jQuery fade "back to top"链接.页面加载链接可见性

jQuery fading "back to top" link. Page load link visibility

本文关键字：链接 quot 加载 可见性 to fade back jQuery top      更新时间：2023-09-26

我正在尝试实现一个"back to top"链接，一旦用户向下滚动页面一定数量，该链接就会淡出我的页面。

我注意到在我的一些页面上，"back to top"链接在隐藏自己之前会在页面上闪烁，但在其他页面上没有。在试图追踪"链接闪光"的原因，我已经创建了一个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隐藏按钮，你就可以删除这一行。

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

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

这段代码可以在你的浏览器中工作吗?

相关文章：