0

我有一个高度为 auto 的 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。

.animate()当它完成时，我在函数内部调用 scrollMe 函数。如果你也想要它，它可以无限循环。但是我在三遍后用柜台停止了它。

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 回答