divの一番下までスクロール

Question

divの下にスクロールするには、クリックすると自動スクロールを取得しようとしています。私はそれが働いているが、それは私がそれを設定しているものとして一度に600pxだけスクロールします。 1クリックで直接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>