jquery 页面滚动到指定位置

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。页面滚动到指定位置是指通过 JavaScript 或 jQuery 将浏览器窗口滚动到页面上的某个特定元素位置。

类型

滚动到顶部：将页面滚动到顶部。
滚动到底部：将页面滚动到底部。
滚动到指定元素：将页面滚动到页面上的某个特定元素位置。

应用场景

导航菜单高亮：当用户滚动到某个部分时，对应的导航菜单项高亮显示。
懒加载：当用户滚动到页面底部时，自动加载更多内容。
返回顶部按钮：提供一个按钮，用户点击后页面滚动到顶部。

示例代码

以下是一个使用 jQuery 实现将页面滚动到指定元素的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Scroll to Element</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .scroll-target {
            margin-top: 1000px;
            padding: 20px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <button id="scroll-btn">Scroll to Target</button>
    <div class="scroll-target">Target Element</div>

    <script>
        $(document).ready(function() {
            $('#scroll-btn').click(function() {
                $('html, body').animate({
                    scrollTop: $('.scroll-target').offset().top
                }, 1000);
            });
        });
    </script>
</body>
</html>

可能遇到的问题及解决方法

jQuery 未加载：确保 jQuery 库已正确加载。
jQuery 未加载：确保 jQuery 库已正确加载。
元素选择器错误：确保选择器正确匹配目标元素。
元素选择器错误：确保选择器正确匹配目标元素。
动画时间设置不当：调整动画时间以达到预期效果。
动画时间设置不当：调整动画时间以达到预期效果。
浏览器兼容性问题：确保代码在不同浏览器上测试通过。

通过以上方法，你可以轻松实现页面滚动到指定位置的功能，并解决可能遇到的问题。

页面内容是否对你有帮助？

有帮助

没帮助

使用jQuery的div切换旋转

、、、、

因此，我试图创建一个效果，当用户滚动到页面底部时，div会旋转以使其指向上。但是，我希望当用户回滚时，它可以旋转回原来的位置。你可以清楚地看到我在说什么：$(window).scroll(function() { if($(window).scrollTop() + $(window).height()> $(document).height() -

浏览 2提问于2013-05-01得票数 1

回答已采纳

2回答

使用jquery滚动图像时的运动

、、

请有人推荐一个教程/资源，或者给出一个使用jquery的基本图像运动的例子。我已经搜索了几个星期，通过谷歌，尝试各种教程和模板，我有困难找到一个例子，我认为是一个简单的动画。我试图找出如何创建一个效果，当你向下滚动页面，一个小图像从A点移动到B点。运动可能是对角线，水平，垂直等。我只想指定一个开始位置和结束位置，滚动开始和结束到达目的地。当您滚动回滚时，进程将反转，程序集将重新组装。

浏览 4提问于2017-02-15得票数 1

回答已采纳

1回答

当用户滚动到页面非常底部时，淡入/退出固定位置div。

、、、

这似乎很基本，但我正在尝试获得一个固定位置的页脚div，当用户滚动到网页的最底部时，可以滑动和淡入，然后在用户滚动回滚时滑动和淡出。当用户滚动回滚时，我无法让div滑出&淡出。有什么建议吗？jQuery: $('#f

浏览 4提问于2012-07-10得票数 2

回答已采纳

1回答

在setTranslationX卷轴上翻译FloatingActionButton时对ViewPager ()的困惑

、、

最后一个选项卡应该显示在底部的中心，当这个选项卡被滚动到。当滚动离开此选项卡时，FloatingActionButton将转换回其右下角位置。2) { }} 当我滚动到最后一个选项卡时，我们将FAB转换到它当前位置的左边，因为传递给setTranslationX()的参数是负值。

浏览 1提问于2016-08-13得票数 1

回答已采纳

1回答

滚动页面，在回发后显示页面的div位置。

我使用以下jquery滚动页面到指定的div位置，同时单击链接按钮。我使用页面顶部的链接按钮，希望从页面中导航到页面底部的指定div上。Session["interval"] = 1; } {} 问题是，当链接按钮调用jquery时，它将页面滚动到所需的<e

浏览 1提问于2014-06-02得票数 0

回答已采纳

3回答

jquery滚动不会从确切位置滚动

、、

我使用下面的jquery让我的链接滚动到下一个div。然而，我遇到了一个问题。从页面的顶部看，脚本运行良好。只要我单击另一个div中的链接(页面下面的另一个链接)，脚本就只能向上或向下滚动，而不会滚动到下一个指定的div。如何使脚本从链接所在位置的当前位置完全滚动？

浏览 0提问于2013-04-03得票数 0

回答已采纳

3回答

如何使用jquery和php链接到同一页面中的特定部分？

、、、、

我知道要链接到同一页中的部件，如下所示：但是当我用jquery和php设计它的时候，ı遇到了一个问题。例如，当用户点击K字母时，页面将链接到#K div并显示其内容。(因为当站点第一次打开时，项目div的显示是无的)。但问题是，尽管#K (K只是示例)K显示了它的内容，但页面并没有重定向到#K div。你必须自己滚动。</di

浏览 0提问于2012-05-19得票数 1

2回答

嵌套<div>的Jquery滚动函数

、、、

我正在尝试制作一个nav，它可以滚动到我的站点的相应<div>。相应的divs嵌套在另一个带有max-height和滚动条的div中。这就是我的jquery往往会让我失败的时候。他是我提到的另一个问题的替罪羊：我如何让它滚动到正确的div，而不是再次单击时奇怪地回滚？谢谢!

浏览 0提问于2014-11-23得票数 1

1回答

在保持滚动位置的同时显示来自服务器的Telerik RadWindow

、、

当滚动到页面底部时显示RadWindow时，窗口呈现在页面顶部，我必须向后滚动才能看到窗口。我通过设置‘MaintainScrollPositionOnPostback’来保持回滚的位置： <%@ Page Language="C#" MaintainScrollPositionOnPostback问题是，如果我滚动到页面底部并单击按钮，页面会在页面顶部显示窗口，但随后会向下滚动到用户滚<e

浏览 0提问于2016-06-06得票数 0

1回答

使用Colorbox将父页面重新加载到同一位置

、

我正在使用colorbox，并且在关闭该框后重新加载父页面。function(){ }); 谢谢，伊莱

浏览 4提问于2010-12-16得票数 1

2回答

使用jQuery平滑滚动到特定位置

、

如何使用jQuery平滑地滚动到特定位置？我可以使用下面的代码使用jQuery平滑地滚动到顶部：但是现在我想滚动到一个页面的位置

浏览 2提问于2011-05-31得票数 2

回答已采纳

1回答

IOS6 uiwebview在使用jquery scrolltop滚动页面时显示背景

、、、、

我有一个网页显示在一个UIWebView中，它使用jquery scrollTop (使用1.6.4版本的jquery)在页面加载后将窗口滚动到指定的位置。这在早于4.5的xcode上工作得很好。在我使用Xcode4.5构建它之后，页面会在滚动之前显示UIWebView的背景。这种情况只在ios6中发生。有没有人在Xcode4.5和ios6上遇到过类似的问题？

浏览 0提问于2012-09-25得票数 2

回答已采纳

1回答

jQuery innerHeight()返回错误的值

我正在使用让我的菜单链接滚动到页面的不同部分。我添加了- jQuery('#masthead').height()来说明固定导航栏的高度。但是，当我单击菜单项时，页面滚动到该位置时，在菜单栏和滚动到的位置之间似乎有一个额外的像素。。下面是我的jQuery代码： jQuery('a[href*="#"]:no

浏览 1提问于2016-11-02得票数 0

2回答

在向下滚动/向上滚动时，我为下面的栏提供了jquery，但是它有延迟CSS。#rightbar_scroll {position: absolute;top: 0;right: 0;z-index: 10000; } var jQuerysidebar = jQuery("#rightbar_scroll"), jQuerywindow = jQuery(window),jQuerysi

浏览 6提问于2013-10-24得票数 0

回答已采纳

1回答

当div到达页面顶部时，将div粘在另一个div下面。

、、、

我有一个.stickyMenu div，它位于页面的中间。当.stickyMenu与.navB的底部接触时，我希望它能停留在那里。当一个用户回滚时，我希望它在它原来的位置上不粘。所以在下面的演示中，当橙色的div滚动到蓝色div的底部时，我希望它在向下滚动时保持在那里，然后当回滚时，当灰色div出现时，我希望它不粘，回到它的自然位置。el.css({ 't

浏览 4提问于2019-10-03得票数 0

4回答