1

スクロール機能を使用して、誰かがスクロールするたびに非表示の「トップに戻る」ボタンを表示したいと考えています。

$(window).scroll(function(){$("#top_btn").css("visibility", "visible");});

ページを名前付きアンカーまで自動的にスクロールするボタンもあります。「トップに戻る」ボタンもその一つです。ページを一番上にスクロールします。また、ページの上部に移動すると不要になるため、クリックすると消えるようにします。

問題は、スクロール機能により、上にスクロールしている場合でも、「トップに戻る」ボタンが表示されることです。クリックすると消えて、隠れたままにしたいです。

私の質問は、トップに戻るボタンをクリックしたときに元のスクロール機能を無効にするにはどうすればよいですか?

scrollTop 関数を使用して「トップに戻る」ボタンを非表示にすることを提案する人もいますが、クロスブラウザーの問題が多すぎます。

基本的に、関数を無効にするコードはありますか?

初心者の質問で申し訳ありませんが、私はjqueryが初めてです。

4

2 に答える 2

3

ボタンをクリックするとすぐにボタンを非表示にするコードを次に示します。

var isScrollingToTop = false;
$(window).scroll(function(){
    if(!isScrollingToTop && $(window).scrollTop()>0)
         $('#scrollBtn').show();
    else
         $('#scrollBtn').hide();
});
$('#scrollBtn').click(function(){
    isScrollingToTop = true;
    $('body,html').animate({scrollTop: 0}, 800,function(){
        isScrollingToTop=false;
    });
});

たとえば、jsfiddle は次のとおりです。 http://jsfiddle.net/btesser/HXQX4/1/

于 2012-10-11T17:09:28.460 に答える
1

scrollTopバニラの jsにはクロス ブラウザーの問題があるのではないかと考えているように感じますが、jQuery の js は問題ないと思います。私が間違っている場合は修正してください。

$(window).scroll(function() {
    if ($(window).scrollTop() === 0) {
        $("#top_btn").css("visibility", "visible");
    }
    else {
        $("#top_btn").css("visibility", "hidden");
    }
);
于 2012-10-11T17:12:48.803 に答える