2016-12-31 168 views
1

我试图在点击滚动到div的底部时得到一个自动滚动。我有它的工作,但它一次只能滚动600px,因为这是我的设置。我只是不知道如何让它直接滚动到一次点击底部的股利。这是我迄今为止。我不知道是否有更简单的方式来编写我所做过的jQuery代码。滚动到div的底部

$('.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>

回答

0

使用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>