1

私が以下に持っているものは動作します。しかし、それは正しい書き方ではないことは確かです。これをjQueryで記述して、2つの異なるリンクを表示または非表示にして、div内のテキストをスクロールする正しい方法は何ですか?

これは、以下が達成することの簡単な説明です。

  1. "wrap" div には、オーバーフローするテキストが含まれています。これはcssに隠されたオーバーフローで隠されています。
  2. 戻るリンクは最初は非表示になっています。
  3. ユーザーがさらにクリックすると、div が div の一番下までスクロールし、more リンクがフェードアウトし、back リンクがフェードインします。
  4. ユーザーが戻るをクリックすると、div 内のテキストが上にスクロールし、戻るリンクがフェードアウトし、詳細リンクがフェードインします。

jQuery

$(document).ready(function() {

    $('#scroll-up').click(function(){
        $('#div').animate({scrollTop: $('#div').offset().top}, 1500);
        $("#scroll-up").fadeOut("fast");
        $("#scroll-down").fadeIn("fast");
    });

     $('#scroll-down').click(function(){
        $('#div').animate({scrollTop:0}, 1500);
        $("#scroll-down").fadeOut("fast");
        $("#scroll-up").fadeIn("fast");
    });

});

CSS

#outer-wrap { margin-top: -50px; padding: 24px 12px 12px 24px; width: 330px; height: 450px; background: rgba(255, 255, 255, 0.5); }
#outer-wrap a { display: block; }
#outer-wrap a#scroll-down { display: none; }
#wrap { margin: 12px 0; width: 330px; height: 360px; overflow: hidden; }

html

<div id="outer-wrap">
     <a href="javascript:void(0)" id="scroll-down">Back</a>
     <div id="wrap" class="column first">
         <p>Long paragraph of text.</p>
     </div>
     <a href="javascript:void(0)" id="scroll-up">More</a>
 </div>
4

1 に答える 1

0

フェードインとフェードアウトのリンクは正しく書かれており、うまく機能していると思います。ただし、 を使用していることに気付き.offset()ました。これにより、ドキュメントに対する要素の位置が得られることに注意してください。したがって、マージントップを追加したり、要素を別の場所に配置したりするだけでも、異なる値が得られます。

下にスクロールして一番下のテキストを表示するので$('#wrap').offset().topはなく。$('#wrap')[0].scrollHeightただし、これを念頭に置いて、 $('#wrap') の非表示のテキストが、設定した 360px の高さよりもはるかに長い場合はどうなるのかも疑問に思っています。そこのテキストを数行スキップして、一番下に進むだけですか？

単純な [Show More - Show Less] を使用しない理由はありません。ユーザーがテキストを読みやすくなるからです。サンプルフィドルを見る

于 2013-10-31T00:01:15.647 に答える