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

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

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

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

还是可以仅移至特定的DOM ID？

jQuery滚动插件

由于这是一个用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();

滚动到页面坐标

动画html和body用元件scrollTop或scrollLeft属性

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

纯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>

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

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

如果希望用户单击链接时将其滚动到此处，则可以使用try-and-true方法：

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

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

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

无需使用任何插件，您可以这样做：

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

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

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

这是纯JavaScript版本：

location.hash = '#123';

它会自动滚动。请记住添加“＃”前缀。

纯Javascript：

window.location = "#elementId"

<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”）。如果您随后将通过ajax在此页面中打开div /表，则可以分配唯一的div并调用脚本以滚动到div的每个内容的特定位置。

希望这会有用。

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

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

试试这个

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

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

这是@ 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
            });
        }
    });
};

使用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();
            });
        });

您可以使用scroll-behavior: smooth;Java来完成此任务

https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-behavior