Question

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

任何帮助解决这个问题都将非常感谢，谢谢

Answer 1

你可以使用.animate()功能上下滚动你的div。

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

我根据内容的高度减去#tetatarea的高度，为textarea div的scrollTop设置动画。

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

然后我将它设置为动画，直到它开始为止。

我在.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;   
        } 
}
});

尝试向下滚动，并在到达div底部时递增

1 个答案: