javascript - スクロールするまでdivを非表示

Question

ページの上部にいるときは見えないようにしようとしていますが、<DIV>スクロールするとページの上部に戻るリンクがポップアップ表示されます。JavaScript を使用する方が簡単ですか、それとも HTML だけでそれを行う方法はありますか?

Answer 1

Javascriptなしでこれを行う方法はありません（私は知っています）。

このようなHTMLを想定すると：

<button id="top">Top</button>

次のコードを使用できます。

$(window).scroll(function() { // when the page is scrolled run this
    if($(this).scrollTop() != 0) { // if you're NOT at the top
        $('#top').fadeIn("fast"); // fade in
    } else { // else
        $('#top').fadeOut("fast"); // fade out
    }
});

$('#top').click(function() { // when the button is clicked
    $('body,html').animate({scrollTop:0},500); // return to the top with a nice animation
});

ここでは「position：fixed」を引き続き使用できます。これは、可視性がないと、ユーザーはそれを表示したりクリックしたりできないためです。