The problem is that when the div scrolls, everything works fine, but when the div doesn't scroll, the scroll down button still appears.

$('.box').append('<div class="scroll_bottom">vniz</div>'); $('.scroll_bottom').click(function(event) { $(this).parent('.box').animate({ scrollTop:$(".box")[0].scrollHeight }, 500, 'swing'); }); 
 .box{ height: 250px; overflow: scroll; width:150px; position:relative; } .scroll_bottom{ border-radius: 50%; position: absolute; right:20px; bottom: 30px; display: block; cursor: pointer; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box"> <h3>Здесь он должен быть</h3> <ul> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> </ul> </div> <div class="box"> <h3>Здесь он должен исчезнуть</h3> <ul> <li>Test</li> <li>Test</li> <li>Test</li> </ul> </div>

    1 answer 1

    Well, you add to all blocks of box, add a box_content block without checking - so it's better to compare the height

     //$('.box').append('<div class="scroll_bottom">vniz</div>'); var $box = $('.box'); function add_button_down() { $box.each(function(){ var $this = $(this); $this.find('.scroll_bottom').detach(); // это нужно если будете использовать resize (если будут длинный текст, он может при изменении ширины экрана, падать на вторую строку) // сравниваем высоту главного блока (box) с его высотой контента (box_content) if($this.outerHeight(true) < $this.children('.box_content').outerHeight(true)){ $this.append('<div class="scroll_bottom">vniz</div>'); } }) } add_button_down() // это нужно если будете использовать resize (если будут длинный текст, он может при изменении ширины экрана, падать на вторую строку) // если считаете что в этом нет необходимости, ппрсот удалите resize $(window).resize(function(){ add_button_down() }) $('.scroll_bottom').click(function(event) { $(this).parent('.box').animate({ scrollTop:$(".box")[0].scrollHeight }, 500, 'swing'); }); 
     .box{ height: 250px; overflow: scroll; width:150px; position:relative; } .scroll_bottom{ border-radius: 50%; position: absolute; right:20px; bottom: 30px; display: block; cursor: pointer; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box"> <div class="box_content"> <h3>Здесь он должен быть</h3> <ul> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> </ul> </div> </div> <div class="box"> <div class="box_content"> <h3>Здесь он должен исчезнуть</h3> <ul> <li>Test</li> <li>Test</li> <li>Test</li> </ul> </div> </div>

    • earned, Thank you right now, I'll set everything up under my code - Bekzod