滚动到页面元素的底部

Scroll To bottom of element on page

本文关键字：底部 元素 滚动      更新时间：2023-09-26

我希望实现点击锚标记并滚动到页面上的元素的效果。

我已经有这个jquery scrollTo。像这样:

$.scrollTo( this.hash, 1500, {
    easing:'easeInOutCubic',
    'axis':'y'
});

然而，我需要对齐它，以便元素在完成动画时位于视口的底部。页面上的每个部分都有不同的高度，所以我想它需要动态地获取元素的位置和高度。

我很难计算出我需要计算多少数字来实现这个目标。

编辑

我现在把它改成了这个

var section = $(this.hash);
var scrollPos = $(section).offset().top + ( $(window).height() - $(section).height() );
$('html, body').scrollTop( scrollPos );

但这仍然是错误的，"#about"部分现在是在页面的中间位置，而不是在视窗的底部对齐。

谢谢

  1. 获取元素高度$(element).height()

  2. 获取viewport的高度$(window).height()

  3. 获取元素的顶部位置$(element).offset().top

  4. 滚动页面到$(element).offset()。Top - ($(window).height()$(元素).height ())

试试:

var section = $(this.hash);
var scrollPos = section.offset().top + section.height() - $(window).height();
演示

这里展示了如何滚动页面，使所选元素与窗口顶部对齐。

关于您要求将其对齐到底部的请求，我已经更正了链接帖子中的代码:

你所要做的基本上就是减去窗口高度和元素高度，如下所示:

$('html, body').animate({
    scrollTop: $("#wmd-input").offset().top - $("#wmd-input").height() - $(window).height()
}, 2000)

我的示例中的#wmd-input元素是本页的答案文本区域，在浏览器中打开开发控制台，粘贴代码并在工作中看到它

相关文章：