嘗試逐漸向下滾動，並在遞增時向上滾動

Question

我有一個高度爲自動的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 --> 

與搞清楚了這一點任何幫助將不勝感激，謝謝

Answer 1

你可以使用.animate()功能，滾動你的DIV上下做。

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

我根據內容的高度減去#teaxtarea的高度來設置textarea div的scrollTop值。

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

然後，我開始動畫回到0。

完成後，我在調用.animate()函數中的scrollMe函數。如果你也想要的話，它可以無限循環下去。但是我三次之後就用櫃檯停下了。

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

下面的代碼，這是我的fiddle，我希望這是你所期待的。

$(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; 
     } 
} 
});