应用场景:
有时候添加元素后,将新增的元素放到了最底部,需要滚动该元素包裹层的底部
html:
<div class="tobottom">去底部</div>
<div class="wrap">
<div class="inner-wrap"></div>
<div>我是底部你看到我了</div>
</div>
css:
.wrap {
width: 100%;
height: 500px;
background: #ddd;
overflow: auto;
}
.inner-wrap {
width: 100%;
height: 1500px;
background: #333;
}
js:
// $('.wrap').scroll(function() {
// var scrollTop = $(this).scrollTop();
// console.log("我滚了", scrollTop)
// var scrollHeight = $('.inner-wrap').height();//元素本身高度
// var windowHeight = $(this).height();//外面包裹层高度
// /**
// *
// * **/
// console.log("scrollHeight", scrollHeight)
// console.log("windowHeight", windowHeight)
// });
// 点击去底部
$(".tobottom").click(function() {
var scrollHeight = $('.inner-wrap').height();
var windowHeight = $(this).height();
var buttomheight = scrollHeight
$('.wrap').animate({
scrollTop: scrollHeight
}, 500);
})
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。