在 jQuery 中滚动到元素的 4 种方法

Ankit Raj Goyal 2023年1月30日 2022年7月12日
  1. 在 jQuery 中滚动到元素的先决条件
  2. jQuery 滚动到元素 - 在文档窗口中滚动
  3. jQuery Animate ScrollTop - 使用 animate 方法平滑滚动
  4. jQuery ScrollTop 到内部链接 - 平滑滚动 jQuery
  5. jQuery 滚动到容器内的元素
  6. 要记住的提示
  7. jQuery ScrollTop 的两个快速快捷方式
在 jQuery 中滚动到元素的 4 种方法

我们展示了滚动到 jQuery 中不同用例的元素的简单解决方案。我们使用 scrollTop()offset() 方法,但我们还演示了一种使用 position() 的新方法。

你将看到如何使用 jQuery 动画平滑滚动。最后,我们演示了两个常用的快捷方式和一些避免错误的提示。

在 jQuery 中滚动到元素的先决条件

  1. scrollTop()
  2. offset()
  3. position()

首先,让我们看一下在 jQuery 中滚动到元素的方法。

scrollTop()

jQuery scrollTop() 方法允许我们获取和设置任何元素的 scrollTop 属性。scrollTop 属性的值是元素内容当前垂直滚动的像素数。

你可以在此处了解有关 scrollTop 属性的更多信息。

.scrollTop() - 获取当前的 scrollTop

我们使用不带任何参数的 scrollTop() 来返回元素当前 scrollTop 值的值。

console.log($("#container").scrollTop());

元素的初始位置

元素的初始 scrollTop 值

我们在控制台中看到元素的 scrollTop 视图的值。现在让我们将元素滚动到不同的位置并再次记录 scrollTop 属性的值。

向下滚动后元素的新位置

向下滚动后元素的新 scrollTop 值

在这里,我们看到控制台记录了一个不同的值。这个 get 表单中的 jQuery scrollTop() 方法是实现滚动效果的关键。

.scrollTop(val) - 设置新的 scrollTop

我们可以在 set 表单中的 jQuery scrollTop() 方法中传递我们想要(垂直)滚动到的值。

$("document.documentElement").scrollTop(0);

这会将主文档滚动到顶部,因为我们传递了值 0。我们将再次将此视为有用的捷径。

我们将一些键值传递给 scrollTop()set 形式,以实现我们的 jQuery 滚动到元素行为。

你可以这里详细了解 jQuery scrollTop() 函数。

offset() - 查找元素的位置以帮助在 jQuery 中实现平滑滚动

jQuery offset() 方法让我们确定文档中任何元素的当前位置。这个方法返回两个属性,topleft;这些是文档边框的像素数(即没有边距)。

console.log(`The position of the element w.r.t document is : ${$("#container").offset().top}`);

我们使用 offset 来查找元素在这个位置的 top 位置

元素相对于文档的顶部位置

offset() 方法显示元素相对于文档的顶部位置。

阅读更多关于 jQuery offset() 方法的信息这里

position() - 在 jQuery 中实现滚动到元素的另一种方法

position() 方法类似于 offset() 方法,但有一点不同——它返回元素相对于其最近父元素的位置。因此,当我们调整元素的相对位置时,例如,在 jQuery 中为 scrolltop 设置动画,position() 方法很有用。

你可以在此链接中获取有关 jQuery position() 方法的详细信息。

position() 返回元素的位置,包括它的边距(这里,它与 offset() 方法不同)。

//displays the position w.r.t. its closest parent

console.log(`This is the position of the element w.r.t. its closest parent:
${$(".filler:first").position().top}`);

// the offset() method displays position relative to the document

console.log(`This is the position of the element w.r.t. the document:
${$(".filler:first").offset().top}`);

了解了基础知识后,让我们滚动到 jQuery 中不同用例的元素。

jQuery 滚动到元素 - 在文档窗口中滚动

$("#clickButton").on("click",function(){
    $([document.documentElement,document.body]).
        scrollTop($("#scrollToMe").offset().top);
});
  1. #clickButton 是单击以滚动到目标元素的按钮。
  2. #scrollToMe 是我们想要滚动到的元素。

jQuery 滚动到元素 - 在文档窗口中滚动

让我们分解代码:

我们使用 .on 方法将事件处理程序附加到我们的按钮。触发这个处理程序的事件是第一个参数,"click" 事件。

当用户点击按钮时,代码执行 .on 方法的第二个参数中的(匿名)回调函数。

我们首先使用两个选择器参数中的任何一个选择要滚动的整个文档 - document.documentElement,它是根元素,或者在本例中是 html 元素和 document.body 元素。

然后我们在这个元素上以它的 set 形式运行 scrollTop() 方法(见上文)。我们想要 scrolltop 到我们的目标元素 - 具有 #scrollToMe ID 的图像元素。

因此,我们首先使用 offset().top 方法找到从页面顶部到此目标图像元素的像素数 - 请记住,此方法会找到相对于文档的位置。

然后,我们将此值传递给附加到文档根/正文元素的 scrollTop() 方法。因此,整个网页移动到目标图像元素,如上面的视频演示所示。

因此,这种方法很容易实现 jQuery 滚动到元素的行为。

但是,老实说,这个即时滚动到目标元素看起来很无聊。让我们添加更多代码来获得漂亮的平滑滚动 jQuery 效果。

jQuery Animate ScrollTop - 使用 animate 方法平滑滚动

$("#clickButton").on("click",function(){
    $([document.documentElement,document.body]).animate({
        scrollTop:$("#scrollToMe").offset().top
    },500)
});

jQuery 滚动到动画元素

代码与前面的方法类似。我们只在选定的根/主体元素上运行 animate() 方法。

第一个参数是一个对象,它具有我们想要动画化的目标 CSS property:value 对。

在这里,我们只想更改 scrollTop 属性以到达我们的目标图像元素。因此,我们将页面顶部的像素数的值分配给图像。

我们可以通过图像元素上的 .offset().top 方法找到这一点,就像在前面的方法中一样。

jQuery ScrollTop 到内部链接 - 平滑滚动 jQuery

我们还可以使用以下代码为任何内部链接创建一个可重用的 jQuery scrolltop 模块。

$('a[href^="#"]').on("click",function(e){
    e.preventDefault();
    let targetHash = this.hash;
    let targetEle = $(targetHash);

    $([document.documentElement,document.body]).animate(
        {scrollTop:targetEle.offset().top},500
    );
})

jQuery 滚动到内部链接

让我们深入了解这里的代码逻辑。 (请参阅 scrollToInternalLink.htmlscrollToInternalLink.jsscrollToInternalLink.css 文件。)

首先,我们使用 [href^="#"] jQuery 属性选择器选择 a 标记。我们使用^ 符号,所以 jQuery 只选择那些具有以 # 符号开头的 href 属性的 a 标记。

我们使用片段标识符在内部链接到任何元素。这些是对内部链接的引用,我们总是在它们前面加上 # 符号。

因此,我们上面的 jQuery 选择器选择了页面上的内部链接。

你可以在此处阅读有关 HTML 内部链接的更多信息。

然后我们调用 e.preventDefault() 方法来禁用重新加载页面的 a 标记的默认行为。

现在,我们提取目标元素的 hash——这是对目标元素片段标识符的引用。大多数现代 HTML 代码使用我们的目标元素的 id 属性。

我们使用这个哈希来选择我们的目标元素。

其余代码与上面的 jQuery animate to scroll to 代码相同。我们传递 animate() 方法并将 scrollTop 属性设置为目标元素的 offset().top 值。

jQuery 滚动到容器内的元素

有时,我们的目标元素位于可滚动容器内。我们可以使用以下代码将 jQuery 定位到这样的元素。

let container = $("#container");
let scrollToMe = $("#scrollToMe");

$("button").on("click",function(){
    container.animate(
        {scrollTop:scrollToMe.offset().top - container.offset().top + container.scrollTop()}
        ,500)
});

jQuery 滚动到容器内的元素

这里,#container 是一个外部 div 元素,充当我们的容器。

#scrollToMe 是我们要滚动到的目标图像。它嵌套在外部 div 容器内。

此外,外部 div 容器还有其他嵌套的 divp 元素。这个外部的 div 容器是可滚动的并且有一个垂直滚动条。

我们将 click 事件处理程序添加到触发按钮。回调在容器元素上运行 animate 方法。

它将容器的 scrollTop 属性设置为一个新值。我们使用以下公式计算这个新值。

scrollToMe.offset().top -container.offset().top + container.scrollTop()
  1. scrollToMe.offset().top 是从文档顶部到目标图像元素的像素数。
  2. container.offset().top 是从页面顶部到容器 div 元素顶部的像素数。

但是,有一个小问题。容器 div 元素是可滚动的;如果它最初滚动,它已经向下移动了那么多像素。

因此,我们必须将 container.scrollTop() 的因素添加到我们传递给 scrollTop 方法的参数中。

要记住的提示

对于使用上述 jQuery 方法滚动到元素,我们有两个重要提示。

专业提示 1:

offsetposition 方法返回一个 float 值,如果你希望页面上有很多缩放,则可能会导致错误。因此,你可以使用 parseInt 函数首先将返回值转换为 int 值。

$("#clickButton").on("click",function(){
    $([document.documentElement,document.body]).
        scrollTop($("#scrollToMe").parseInt(offset().top));
});

专业提示 2:

animation() 也将缓动函数作为参数。此函数决定动画的执行方式。

该函数的默认值为 swing,提供平滑均匀的动画效果。所以,我们可以使用这个默认值来获得平滑滚动的 jQuery 本身。

jQuery ScrollTop 的两个快速快捷方式

最后,对于 jQuery 滚动到元素的两个常见用例,我们有两个快捷方式。

jQuery 滚动到文档顶部的快捷方式

如果你有一个包含大量内容的长网页,你可能希望在底部提供一个"scroll to top" 链接以便于导航。

这种锚链接的快捷代码是:

// this code scrolls to the top of the document with a click on the anchor element

$("#top").on("click", function(){
    $(document.documentElement, document.body).animate({
        scrollTop:0},
    500);
});

JQuery 滚动到文档顶部快捷方式

我们将 animate 函数的目标 scrollTop 值设置为 0 - 这会将我们滚动到页面顶部。

将哈希/片段标识符添加到 jQuery 滚动到元素中的 URL

如果你想将目标元素的片段标识符添加到地址栏中的 URL,你只需在我们滚动到上面的锚链接代码中添加一行。

// this code adds the fragment identifier/hash of the target
// element to the URL

//this is a reusable module to jQuery scrollTop from any internal link

$('a[href^="#"]').on("click",function(e){
    e.preventDefault();
    let targetHash = this.hash;
    let targetEle = $(targetHash);

    $([document.documentElement,document.body]).animate(
        {scrollTop:targetEle.offset().top},
        500, function(){
            window.location.hash = targetHash;
        }
    );
})

window.location.hash = targetHash 行是提供此功能的代码。

jQuery 滚动并将元素哈希添加到 URL

你可以看到在 URL 的末尾添加了元素哈希/片段标识符 scrollToMe

请注意将此代码片段作为 animate 函数的回调包含在内,以确保它在动画之后执行 - 与 JavaScript 最佳实践同步。

相关文章 - jQuery Scroll