在响应布局中排除jQuery脚本

Question

我有一个"返回顶部"按钮的jQuery脚本，如下所示：

<script type="text/javascript">
$(document).ready(function(){
// hide #back-top first
$("#TopButton").hide();
// fade in #back-top
$(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('#TopButton').fadeIn();
        } else {
            $('#TopButton').fadeOut();
        }
    });
    // scroll body to 0px on click
    $('#TopButton, #logo').click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 800);
        return false;
    });
});
});
</script>

我有两个样式表，一个用于桌面，另一个用于移动。当移动样式表按如下方式使用时，我正试图隐藏"返回页首"按钮：

#TopButton {
display: none;
}

但它仍然出现了。有没有什么方法可以在不干扰HTML的情况下解决这个问题？

提前谢谢。

Answer 1

您当前的方法出现问题，因为您的javascript代码.fadeIn()将覆盖您的display: none;

您需要设置一个不受jquery代码影响的CSS值。我假设你的#TopButton已经完全就位了？如果是，请尝试设置等属性

left: -9999px;

这将使它远离页面，当jQuery试图将其淡入时，它不会受到任何影响。

希望这能帮助你摆脱

Answer 2

如果你不想更改HTML或CSS，你的代码可能看起来像

if ($('#TopButton').css('display')!='none')
{
    // hide #back-top first
    $("#TopButton").hide();
    // fade in #back-top
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $('#TopButton').fadeIn();
            } else {
                $('#TopButton').fadeOut();
            }
        });
        // scroll body to 0px on click
        $('#TopButton, #logo').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });