jquery - 在响应式布局中排除 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;
        });

    });