Прокрутите вниз до конца

Question

Я пытаюсь получить автоматическую прокрутку по щелчку, чтобы прокрутить до нижней части div. У меня он работает, но он только прокручивается на 600 пикселей за раз, как и то, на что я его настроил. Я просто не уверен, как заставить его прокручивать непосредственно до нижней части div одним нажатием. Это то, что я до сих пор. Я не знал, был ли более простой способ написать код jquery, который я сделал до сих пор.

$('.scroll-down').on('click', function() { 
 
    var currentScrollPosition = 0; 
 
    currentScrollPosition += 600; 
 
    $('.bx-viewport').animate({ 
 
    scrollTop: currentScrollPosition 
 
    }, 2000); 
 
}); 
 
$('.scroll-up').on('click', function() { 
 
    var currentScrollPosition = 0; 
 
    currentScrollPosition -= 600; 
 
    $('.bx-viewport').animate({ 
 
    scrollTop: currentScrollPosition 
 
    }, 2000); 
 
});

.bx-viewport { 
 
    height: 600px !important; 
 
    overflow: auto !important; 
 
    width: 100%; 
 
    position: relative 
 
} 
 
.scroll-up { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: 100px; 
 
    cursor: pointer; 
 
    color: rgba(0, 0, 0, 0.5); 
 
} 
 
.scroll-down { 
 
    position: absolute; 
 
    top: 40px; 
 
    right: 100px; 
 
    cursor: pointer; 
 
    color: rgba(0, 0, 0, 0.5); 
 
} 
 
img { 
 
    height: 900px; 
 
    overflow: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="bx-viewport"> 
 
    <img src="http://placehold.it/200x1000" /> 
 
</div> 
 
<div class="scroll-down">scroll down</div> 
 
<div class="scroll-up">scroll up</div>

Answer 1

Используйте scrollHeight свойство и вычитаем высоту элемента, чтобы найти свободное место для прокрутки.

$('.scroll-down').on('click', function() { 
 
    var target = $('.bx-viewport'), 
 
     height = target.height(), 
 
     scrollHeight = target.prop('scrollHeight'); 
 
    
 
    target.animate({ 
 
    scrollTop: scrollHeight-height 
 
    }, 2000); 
 
}); 
 

 
$('.scroll-up').on('click', function() { 
 
    $('.bx-viewport').animate({ 
 
    scrollTop: 0 
 
    }, 2000); 
 
});

.bx-viewport { 
 
    height: 600px !important; 
 
    overflow: auto !important; 
 
    width: 100%; 
 
    position: relative 
 
} 
 
.scroll-up { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: 100px; 
 
    cursor: pointer; 
 
    color: rgba(0, 0, 0, 0.5); 
 
} 
 
.scroll-down { 
 
    position: absolute; 
 
    top: 40px; 
 
    right: 100px; 
 
    cursor: pointer; 
 
    color: rgba(0, 0, 0, 0.5); 
 
} 
 
img { 
 
    height: 900px; 
 
    overflow: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="bx-viewport"> 
 
    <img src="http://placehold.it/200x1000" /> 
 
</div> 
 
<div class="scroll-down">scroll down</div> 
 
<div class="scroll-up">scroll up</div>