1

「トップに戻る」画像を作成しようとしています。ページの右下隅に貼り付ける必要があります。

画像を使用してdivを作成しましたが、ページの下部に永続的に表示するための最良の方法がわかりません。絶対測位を使用するのが最善ですか？

また、ユーザーが特定のポイントを超えてスクロールしたときにのみdivを表示し、フェードイン（または同様の何か）したいです。

私はオンラインで調べましたが、私が望むことをするものを見つけることができません。単にdivを下に固定しようとしましたが、使用しているチュートリアルでは、1つの小さなグラフィックではなく、フッターの作成方法が示されているため、うまく機能しません。

これのベストプラクティスは何ですか？助けていただければ幸いです。

4

2 に答える 2

12

これはどう：

http://jsfiddle.net/uRN64/1

HTML

<div id="log" style='display:none; position:fixed; bottom:0px; right:0px; width:200px background-color:red;'>Back To Top</div>

<div style='height:1200px; background-color:orange'>Try Scrolling me</div>​

JS

$(function(){
    $(window).scroll(function() {              
      $('#log').toggle($(document).scrollTop() > 100);
    });
})
​

フェードするには：

変更$('#log').toggle($(document).scrollTop() > 100);：

$(document).scrollTop() > 100 ? $('#log:hidden').fadeIn() : $('#log:visible').fadeOut();
于 2012-09-01T15:14:10.240 に答える
0

あなたがdivを持っているとしましょう

<div class="bottom">Your Img</div>

divを固定して表示したいので、に適用fixed positionします。div

そうすることで、div私たちは自由に希望のエリアに移動することができます。

次に、CSSプロパティright:0;を適用することで、ページの右端と一番下の位置にbottom:0;移動できます。div

HTML：

<div class="bottom"></div>

CSS：

.bottom
{
width:100px;
height:30px;
background-color:Gray;
border:1px solid black;
position:fixed;
right:0; 
bottom:0;    
}​

これが実際の例です

于 2012-09-01T15:14:14.880 に答える