【发布时间】:2010-11-20 17:30:11
【问题描述】:
我们都知道从视口顶部滚动到某个位置的解决方案:
$("html, body").animate({scrollTop:240}, 'fast');
有没有一种类似于scrollTop的滚动方式,只是从视口底部滚动?
我想要做什么:在点击事件中,页面应该滚动到正文中的任何位置的 div,当 div 到达视口底部时它应该停止滚动,完全可见。这可能吗?
【问题讨论】:
我们都知道从视口顶部滚动到某个位置的解决方案:
$("html, body").animate({scrollTop:240}, 'fast');
有没有一种类似于scrollTop的滚动方式,只是从视口底部滚动?
我想要做什么:在点击事件中,页面应该滚动到正文中的任何位置的 div,当 div 到达视口底部时它应该停止滚动,完全可见。这可能吗?
【问题讨论】:
你需要结合使用.offset().top,这是元素相对于文档顶部的偏移量,和$(window).height(),这是视口的高度:
var b = $('myEle');
$('html').animate({scrollTop: b.offset().top - $(window).height() + b.outerHeight()});
滚动到常用的.offset().top 位置将使块移动到屏幕顶部,因此我们只需减去视口的高度并添加对象的高度以使其移动到位于用户视口底部的位置。
在这里查看一个简单的演示:http://www.jsfiddle.net/yijiang/Xkj9s/
【讨论】:
scrollHeight 属性告诉您可以滚动的数量。所以如果你想从底部滚动240px,使用scrollHeight - 240,例如:
var elem = $('html');
elem.animate({ scrollTop: elem[0].scrollHeight - 240 }, 'fast');
【讨论】:
scrollHeight 没有考虑窗口高度,如果你想相对于窗口滚动,你需要减去它。