0

高さが自動のdivがあり、クリックすると下に達するまで徐々に下にスクロールし、下に達するとdivの一番上に達するまで徐々に上にスクロールして戻るボタンが必要です。最上部に到達すると、再び下にスクロールします。

これが私がこれまでに持っているjQueryです。

function scrollMe() {
var iend = 'false';
var dd = 'down';
var si = $('.scroll-indicator');
var j = $('#textarea').scrollTop();
    if(j == 0){
        console.log('at the top');
        dd = 'down'
    }
    else if(j >= 800){
        dd = 'up';
        console.log('at the bottom');
    }

if(dd == 'down'){
    si.on('click', function(){
        console.log(iend);
        console.log(dd);
        var y = $('#textarea').scrollTop();  //your current y position on the page
        $('#textarea').scrollTop(y+150);
    });
}
else{
    si.on('click', function(){
        console.log(iend);
        var y = $('#textarea').scrollTop();  //your current y position on the page
        $('#textarea').scrollTop(y-150);
    });
}    

// alert when end is reached of scroll
    $('#textarea').bind('scroll', function(){
      if($(this).scrollTop() + 
         $(this).innerHeight()
         >= $(this)[0].scrollHeight)
      {
        iend = 'true';
        dd = 'up';
        si.addClass('scrollUp');

      }
      else{
        iend = 'false';
        si.removeClass('scrollUp');
      }
    });
}scrollMe();

ここにhtmlがあります

    <div class="row row-nopadding hook" id="app-info" style="position: relative;">
                <div class="scroll-indicator"></div>
                <div class="auto" id="textarea">
                  <article class="pl15">
                    <p><strong>Do not use on rabbits or animals other than dogs.</strong> Do not allow your dog to ingest this product. Do not use on puppies under 12 weeks of age. Use entire contents of tube vial on each dog. Do not split one tube between dogs. Do not use multiple tubes on one dog. Weigh your dog to be sure you are applying the right dose formulated for the weight of your dog. Separate the treated dog from all other dogs and cats for 24 hours after treatment has been applied.</p>

                    <p>Monitor your dog after application. The most common signs of ingestion are excessive salivation and foaming at the mouth. If these symptoms occur, immediately feed your dog and continue to monitor your dog for the next 24 hours. Some dogs may experience temporary startle effects when any product is applied. Dogs may experience some temporary irritation at the site of product aplication such as redness, scratching or other signs of discomfort. If signs of sensibility occur, bathe your dog with a mild soap and rinse with large amounts of water. If signs persist or become more severe within a few days of application, consult a veterinarian immediately by calling 1-800-660-1842. If your dog has an unusual reaction to the initial application, consult a veterinarian before repeating application.</p>

                    <p><strong>DO NOT USE ON CATS:</strong> May be toxic and POTENTIALLY FATAL if applied to or ingested by a cat. Keep cats away from treated dogs for 24 hours. Cats that actively groom or engage in a close physical contact with treated dog may be at risk of serious harmful effects. Cats exhibiting signs of ingestion such as excessive salivation and foaming at the mouth should be taken to the veterinarian immediately.</p>
                  </article>
                </div>
              </div><!-- END OF ROW-NOPADDING -->
            </div><!-- END OF COL-SM-5 ROW-NOPADDING -->

これを理解するための助けをいただければ幸いです、ありがとう

4

1 に答える 1

0

関数を使用し.animate()て div を上下にスクロールできます。

$("#textarea").animate({scrollTop: amountToScroll},3000,);

コンテンツの高さから #teaxtarea の高さを引いた値に基づいて、textarea div の scrollTop をアニメートします。 

var amountToScroll = $(".pl15").height() - $("#textarea").height();

次に、アニメーションを開始して 0 に戻します。

完了したら、関数内で scrollMe 関数を呼び出してい.animate()ます。必要に応じて、無限ループに進むこともできます。でも3回でカウンターで止めました。

if(counter <= 2)
   scrollMe();
   counter++;

以下はコードで、これが私のフィドルです。これがあなたが探していたものであることを願っています。

$(function(){
    var $si = $('.scroll-indicator');
    var down = true;
    var counter = 0;
    var scrollLoop;
    $si.click(function(){
        scrollMe();        
    });

    function scrollMe() {

        var amountToScroll = $(".pl15").height() - $("#textarea").height();

        if(down){ 
            $("#textarea").animate({scrollTop: amountToScroll},3000,
                function(){
                    if(counter <= 2)
                        scrollMe();
                    counter++;
                }
            ); 
            down = false;
        }
        else{
            $("#textarea").animate({scrollTop: 0},3000,function(){
                if(counter <= 2)
                    scrollMe();
                counter++;
                }
            );
         down = true;   
        } 
}
});
于 2013-11-15T14:31:59.993 に答える