14

ボタンのクリックに基づいて div を上下にスクロールする機能を追加しようとしています。スクロールダウン部分は簡単にできましたが、スクロールアップ部分で行き詰まり、もう1つの懸念はシナリオでした.

「下へ」ボタンをクリックします。

手動で下にスクロールすると、スクロールバーを下にドラッグします。

Go Downボタンをもう一度クリックすると、スクロール用の値が割り当てられた変数には、スクローラーの現在の位置を検出する代わりに古い値が含まれているため、スクロールバーは前の位置に移動します..jsfiddleリンクを追加します私の作品を見せて、コードも貼り付けてください。スクロールアップオプションも間違っている可能性があります!!

http://jsfiddle.net/xEFq5/7/

var scrolled=0;

$(document).ready(function(){


$("#downClick").on("click" ,function(){
    scrolled=scrolled+300;

    $(".cover").animate({
        scrollTop:  scrolled
    });

});


$("#upClick").on("click" ,function(){
    scrolled=scrolled-300;

    $(".cover").animate({
        scrollBottom:  scrolled
    });

});


$(".clearValue").on("click" ,function(){
    scrolled=0;
});


});


<div class='header'><button id='upClick'>Go Up</button> <button id='downClick'>Go Down</button><button class='clearValue'>Clear Value</button> </div>


 <div class='cover'><div class='rightSection'></div></div>

また、この機能を備えた優れたプラグインはありますか??

4

7 に答える 7

25

scrollBottomjQuery のメソッドではありません。

更新されたデモ - http://jsfiddle.net/xEFq5/10/

これを試して：

   $("#upClick").on("click" ,function(){
     scrolled=scrolled-300;
        $(".cover").animate({
          scrollTop:  scrolled
     });
   });
于 2013-05-16T11:51:56.577 に答える
7

ボタンのクリックで div をスクロールします。

HTML コード:-

 <div id="textBody" style="height:200px; width:600px; overflow:auto;">
    <!------Your content---->
 </div>

divをスクロールするためのJQueryコード:-

$(function() {
   $( "#upBtn" ).click(function(){
      $('#textBody').scrollTop($('#textBody').scrollTop()-20);
 }); 

 $( "#downBtn" ).click(function(){
     $('#textBody').scrollTop($('#textBody').scrollTop()+20);;
 }); 

});
于 2014-08-15T20:39:57.250 に答える
2

上に行くには、次scrollTopの代わりに使用する必要がありscrollBottomます。

$("#upClick").on("click", function () {
    scrolled = scrolled - 300;
    $(".cover").stop().animate({
        scrollTop: scrolled
    });
});

また、.stop()メソッドを使用して、 divで現在実行中のアニメーションを停止します。coverが.stop()要素で呼び出されると、現在実行中のアニメーション (存在する場合) が直ちに停止します。

フィドルのデモ

于 2013-05-16T11:51:51.310 に答える