我做了一个scrollable,里面有一个浮动按钮,点击后可以滚动到底部,
<style>
box {
padding: 8px 20px;
border: 1px solid #222;
position: sticky;
bottom:10px;
left:30px;
box-shadow: -3px 3px 3px #999;
}
</style>
<hr>
<div id="utt" style="overflow-y: scroll; height:75%;">
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<a href="#" onclick="scroll" class="toBotetom"><box><b>Scroll to bottom</b></box></a>
</div>
<hr>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function scroll() {
$("a.toBotetom").click(function scroll() {
let elm = $("#utt")
elm.animate({
scrollTop: elm[0].scrollHeight
}, 500);
});
});
</script>
当完全滚动到底部时,如何使此按钮消失?
1条答案
按热度按时间sulc1iza1#
HTML:
这将创建一个按钮,单击该按钮时使用
bottom()
函数。要实现按钮的功能,我们可以使用以下Javascript:
我们可以使用CSS将按钮固定在屏幕的中心: