如何使用 jquery 滚动到页面上的特定位置？

Question

是否可以使用 jQuery 滚动到页面上的特定位置？

我想要滚动的位置是否必须具有：

<a name="#123">here</a>

或者它可以移动到特定的 DOM id 吗？

Answer 1

jQuery Scroll Plugin

因为这是一个用 jquery 标记的问题，我不得不说，这个库有一个非常好的平滑滚动插件，你可以在这里找到它：
http://plugins.jquery.com/scrollTo/

文档摘录：

$('div.pane').scrollTo(...);//all divs w/class pane

或

$.scrollTo(...);//the plugin will take care of this

自定义 jQuery滚动函数

您可以通过定义自定义滚动 jquery 函数来使用非常轻量级方法

$.fn.scrollView = function () {
    return this.each(function () {
        $('html, body').animate({
            scrollTop: $(this).offset().top
        }, 1000);
    });
}

，并像这样使用它：

$('#your-div').scrollView();

滚动到页面坐标

Animate html具有 scrollTop 或 scrollLeft 属性的 和 body 元素

$('html, body').animate({
    scrollTop: 0,
    scrollLeft: 300
}, 1000);

Plain javascript

使用 window.scroll 滚动

window.scroll(horizontalOffset, verticalOffset);

只是总结一下，使用 window.location.hash 跳转到 ID 为

window.location.hash = '#your-page-element';

直接在 HTML 中的元素（辅助功能增强）

<a href="#your-page-element">Jump to ID</a>

<div id="your-page-element">
    will jump here
</div>

Answer 2

是的，即使使用纯 JavaScript，这也很容易。您给一个元素一个 id，然后您可以将其用作“书签”：

<div id="here">here</div>

如果您希望它在用户单击链接时滚动到那里，您可以使用经过验证的方法：

<a href="#here">scroll to over there</a>

要以编程方式执行此操作，请使用scrollIntoView()

document.getElementById("here").scrollIntoView()

Answer 3

不需要使用任何插件，你可以这样做：

var divPosition = $('#divId').offset();

然后使用它来滚动文档到特定的DOM：

$('html, body').animate({scrollTop: divPosition.top}, "slow");

Answer 4

这是一个纯 JavaScript 版本：

location.hash = '#123';

它会自动滚动。
记得添加“#”前缀。

Answer 5

简单的 JavaScript：

window.location = "#elementId"

Answer 6

<div id="idVal">
    <!--div content goes here-->
</div>
...
<script type="text/javascript">
     $(document).ready(function(){
         var divLoc = $('#idVal').offset();
         $('html, body').animate({scrollTop: divLoc.top}, "slow");
     });
</script>

此示例显示如何定位到特定的 div id，即本例中的“idVal”。如果您有后续的 div/表格将通过 ajax 在此页面中打开，那么您可以分配唯一的 div 并调用脚本滚动到 div 的每个内容的特定位置。

希望这会有用。

Answer 7

<script type="text/javascript">
    $(document).ready(function(){
        $(".scroll-element").click(function(){
            $('html,body').animate({
                scrollTop: $('.our_companies').offset().top
            }, 1000);

            return false;
        });
    })
</script>

Answer 8

试试这个

<div id="divRegister"></div>

$(document).ready(function() {
location.hash = "divRegister";
});

Answer 9

这是 @juraj-blahunka 的轻量级方法的变体。此函数不假设容器是文档，并且仅在项目不在视图范围内时滚动。动画排队也被禁用以避免不必要的弹跳。

$.fn.scrollToView = function () {
    return $.each(this, function () {
        if ($(this).position().top < 0 ||
            $(this).position().top + $(this).height() > $(this).parent().height()) {
            $(this).parent().animate({
                scrollTop: $(this).parent().scrollTop() + $(this).position().top
            }, {
                duration: 300,
                queue: false
            });
        }
    });
};

Answer 10

使用jquery.easing.min.js，修复IE控制台错误

Html

<a class="page-scroll" href="#features">Features</a>
<section id="features" class="features-section">Features Section</section>


        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="js/jquery.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>

        <!-- Scrolling Nav JavaScript -->
        <script src="js/jquery.easing.min.js"></script>

Jquery

//jQuery to collapse the navbar on scroll, you can use this code with in external file with name scrolling-nav.js
        $(window).scroll(function () {
            if ($(".navbar").offset().top > 50) {
                $(".navbar-fixed-top").addClass("top-nav-collapse");
            } else {
                $(".navbar-fixed-top").removeClass("top-nav-collapse");
            }
        });
        //jQuery for page scrolling feature - requires jQuery Easing plugin
        $(function () {
            $('a.page-scroll').bind('click', function (event) {
                var anchor = $(this);
                if ($(anchor).length > 0) {
                    var href = $(anchor).attr('href');
                    if ($(href.substring(href.indexOf('#'))).length > 0) {
                        $('html, body').stop().animate({
                            scrollTop: $(href.substring(href.indexOf('#'))).offset().top
                        }, 1500, 'easeInOutExpo');
                    }
                    else {
                        window.location = href;
                    }
                }
                event.preventDefault();
            });
        });

Answer 11

您可以使用 scroll-behavior: smooth; 来完成此操作，无需 Javascript

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior