jquery - 以响应式布局排除jQuery脚本

我有一个“返回首页”按钮的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？

提前致谢。

最佳答案

您当前的方法遇到了问题，因为您的JavaScript代码.fadeIn()将覆盖您的display: none;

您需要设置一个不受jquery代码影响的CSS值。我假设您的#TopButton绝对定位？如果是这样，请尝试设置一个属性，例如

left: -9999px;

这将使它脱离页面，并且当jQuery尝试淡入时完全不会受到影响。

希望能帮到你