1

以下にリストされているように、「トップに戻る」ボタン用の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>

デスクトップ用とモバイル用の 2 つのスタイルシートがあります。モバイルスタイルシートが次のように使用されている場合、トップに戻るボタンを非表示にしようとしています:

#TopButton {
display: none;
}

しかし、それはまだ表示されます。HTMLを台無しにすることなく、とにかくこれについて何かありますか?

前もって感謝します。

4

2 に答える 2

1

.fadeIn()JavaScriptコードがあなたをオーバーライドするため、現在の方法には問題がありますdisplay: none;

jquery コードの影響を受けない CSS 値を設定する必要があります。あなたの #TopButton は絶対に配置されていると思いますか? そうである場合は、次のようなプロパティを設定してみてください

left: -9999px;

これにより、ページから外れてしまい、jQuery がフェードインしようとしてもまったく影響を受けません。

うまくいけば、それはあなたを助けます

于 2012-09-12T17:56:35.047 に答える
0

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

    });
于 2012-09-12T18:02:54.353 に答える