这在没有jQuery的情况下是可以实现的：

document.getElementById("element-id").scrollIntoView();

我编写了一个通用函数，可以滚动到jQuery对象、CSS选择器或数值。

示例用法：

// scroll to "#target-element":
$.scrollTo("#target-element");

// scroll to 80 pixels above first element with class ".invalid":
$.scrollTo(".invalid", -80);

// scroll a container with id "#my-container" to 300 pixels from its top:
$.scrollTo(300, 0, "slow", "#my-container");

函数的代码：

/**
* Scrolls the container to the target position minus the offset
*
* @param target    - the destination to scroll to, can be a jQuery object
*                    jQuery selector, or numeric position
* @param offset    - the offset in pixels from the target position, e.g.
*                    pass -80 to scroll to 80 pixels above the target
* @param speed     - the scroll speed in milliseconds, or one of the
*                    strings "fast" or "slow". default: 500
* @param container - a jQuery object or selector for the container to
*                    be scrolled. default: "html, body"
*/
jQuery.scrollTo = function (target, offset, speed, container) {

    if (isNaN(target)) {

        if (!(target instanceof jQuery))
            target = $(target);

        target = parseInt(target.offset().top);
    }

    container = container || "html, body";
    if (!(container instanceof jQuery))
        container = $(container);

    speed = speed || 500;
    offset = offset || 0;

    container.animate({
        scrollTop: target + offset
    }, speed);
};

如果只处理滚动到输入元素，则可以使用focus（）。例如，如果要滚动到第一个可见输入：

$(':input:visible').first().focus();

或容器中第一个可见的输入，类为.error：

$('.error :input:visible').first().focus();

感谢Tricia Ball指出这一点！

我就是这样做的。

document.querySelector('scrollHere').scrollIntoView({ behavior: 'smooth' })

适用于任何浏览器。

它可以很容易地包装成函数

function scrollTo(selector) {
    document.querySelector(selector).scrollIntoView({ behavior: 'smooth' })
}

下面是一个工作示例$（“.btn”）.click（函数）{document.getElementById（“scrollHere”）.sollIntoView（｛behavious:“smooth”｝）}).btn｛margin-bottom:500px；｝.middle｛显示：块；边距底部：500px；颜色：红色；｝<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script><button class=“btn”>向下滚动</button><h1 class=“middle”>看到了吗</h1><div id=“scrollHere”>到达目的地</div>

Docs

这是我使用通用类选择器抽象ID和href的方法

$（函数）{//可在任何地方使用的通用选择器$（“.js滚动到”）.click（函数（e）{//动态获取hrefvar destination=$（this）.attr（'href'）；//阻止href=“#”链接更改URL哈希（可选）e.预防违约（）；//动画滚动到目的地$（'html，body'）.animate({scrollTop:$（destination）.offset（）.top}, 500);});});<!-- 固定导航菜单示例--><ul class=“nav”><li><a href=“#section-1”class=“nav item js scroll to”>项目1</a></li><li><a href=“#section-2”class=“nav item js scroll to”>项目2</a></li><li><a href=“#section-3”class=“nav item js scroll to”>项目3</a></li></ul>

在大多数情况下，最好使用插件。认真地我要在这里兜售我的。当然还有其他的。但请检查他们是否真的避免了那些你首先想要插件的陷阱——并不是所有人都这样做。

我写过在其他地方使用插件的原因。简而言之，这里大多数答案的基础是一行

$('html, body').animate( { scrollTop: $target.offset().top }, duration );

是糟糕的用户体验。

动画不会响应用户操作。即使用户单击、轻击或尝试滚动，它也会继续。如果动画的起点接近目标元素，则动画会非常缓慢。如果目标元素位于页面底部附近，则无法滚动到窗口顶部。然后，滚动动画在中间运动时突然停止。

为了处理这些问题（以及其他一些问题），您可以使用我的插件jQuery.scrollable

$( window ).scrollTo( targetPosition );

就这样。当然，还有更多的选择。

关于目标位置，在大多数情况下，$target.offset（）.top完成任务。但是请注意，返回的值没有考虑html元素上的边框（请参见本演示）。如果你需要目标位置在任何情况下都准确，最好使用

targetPosition = $( window ).scrollTop() + $target[0].getBoundingClientRect().top;

即使在html元素上设置了边框，这也能正常工作。