【问题标题】:Is there a way, to scroll similar to scrollTop, just from the bottom?有没有办法从底部滚动类似于scrollTop?
【发布时间】:2010-11-20 17:30:11
【问题描述】:

我们都知道从视口顶部滚动到某个位置的解决方案:

$("html, body").animate({scrollTop:240}, 'fast');

有没有一种类似于scrollTop的滚动方式,只是从视口底部滚动?

我想要做什么:在点击事件中,页面应该滚动到正文中的任何位置的 div,当 div 到达视口底部时它应该停止滚动,完全可见。这可能吗?

【问题讨论】:

    标签: jquery html


    【解决方案1】:

    你需要结合使用.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/

    【讨论】:

      【解决方案2】:

      scrollHeight 属性告诉您可以滚动的数量。所以如果你想从底部滚动240px,使用scrollHeight - 240,例如:

      var elem = $('html');
      elem.animate({ scrollTop: elem[0].scrollHeight - 240 }, 'fast');
      

      Example on JSBin

      【讨论】:

      • 这个解决方案对我不起作用。页面每次滚动到底部。当我使用更大的数量时,例如 - 1140(900 是页面高度 + 240),它可以工作,但是当我想向后滚动时会遇到麻烦。奇怪。
      • @Thomasz:那是因为scrollHeight 没有考虑窗口高度,如果你想相对于窗口滚动,你需要减去它。
      【解决方案3】:
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-01-07
      • 1970-01-01
      • 2019-12-24
      • 2019-10-26
      • 1970-01-01
      相关资源
      最近更新 更多