0

私はこれらの典型的な位置の1つを使用しています.jqueryを介して、手動で下にスクロールするとフェードインし、手動で上にスクロールするとフェードアウトする固定の「一番上にスクロール」リンク。リンクをクリックすると、animate-scrollTop によってサイトのトップに移動します。

CSS の問題は、opera-or-firefox でリンクをクリックすると、CSS が bottom:10px から top:0px に切り替わり、再度クリックしない限り scrollTop が発生しないことです。

スタイルシートで top:0 に変更すると、リンクは正常に機能します。しかし、bottom:10px (または top:0 以外のもの) を試してみてください。それをクリックすると、再び top:0 に変わります。FF & O では top:0px 以外は許可されていないようです。

何か案は？

これがCSSです-

a#scrollup{
display:none;
width:51px;
height:51px;
-moz-opacity:.7;
opacity:.7;
zoom:1;
filter:alpha(opacity=70);
position:fixed;
overflow:hidden;
text-indent:100%;
white-space: nowrap;
z-index:1001;
bottom:10px;
right:10px;
background: url('images/ui.totop.png') no-repeat;
-webkit-transition:opacity 0.8s ease-in-out;
   -moz-transition:opacity 0.8s ease-in-out;
    -ms-transition:opacity 0.8s ease-in-out;
     -o-transition:opacity 0.8s ease-in-out;
        transition:opacity 0.8s ease-in-out;
}

a#scrollup:hover{
-moz-opacity:.9;
opacity:.9;
filter:alpha(opacity=90);
}
a#scrollup:active{bottom:8px}

これがスクリプトです-

    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('a#scrollup').fadeIn();
        } else {
            $('a#scrollup').hide('fast');  
        }
    }); 

    $('a#scrollup').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600, 'easeInExpo');
        return false;
    });
4

1 に答える 1

0

私が考えることができる唯一の修正は、アンカー/リンクではなく、アンカーに div ラッパーを与え、position:fixed と bottom:10px を適用することでした。

新しい CSS:

div#scrollup {
display:none;
position:fixed;
z-index:1001;
bottom:10px;
right:10px;
}

div#scrollup a{
overflow:hidden;
text-indent:100%;
white-space: nowrap;
width:51px;
height:51px;
-moz-opacity:.7;
opacity:.7;
zoom:1;
filter:alpha(opacity=70);
background: url('images/ui.totop.png') no-repeat;
-webkit-transition:opacity 0.8s ease-in-out;
   -moz-transition:opacity 0.8s ease-in-out;
    -ms-transition:opacity 0.8s ease-in-out;
     -o-transition:opacity 0.8s ease-in-out;
        transition:opacity 0.8s ease-in-out;
}

div#scrollup a:hover{
-moz-opacity:.9;
opacity:.9;
filter:alpha(opacity=90);
}
div#scrollup a:active{bottom:8px}

変更されたjquery:

     $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('div#scrollup').fadeIn();
        } else {
            $('div#scrollup').hide('fast');  
        }
    }); 

    $('div#scrollup a').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600, 'easeInExpo');
        return false;
    });

そのため、ラッパーが必要でした。

于 2013-01-05T17:48:05.343 に答える