我就是这样做的。

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

适用于任何浏览器。

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

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

这是一个工作示例

$(".btn").click(function() { document.getElementById("scrollHere").scrollIntoView( {behavior: "smooth" }) }) .btn {margin-bottom: 500px;} .middle {display:堵塞;边距底部：500px；颜色：红色；} 滚动down

你看到了吗？

Docs

---

史蒂夫和彼得的解决方案效果很好。

但在某些情况下，您可能必须将值转换为整数。奇怪的是，$("...").offset().top 的返回值有时在 float 中。
使用：parseInt($("....").offset().top)

例如：

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: parseInt($("#elementtoScrollToID").offset().top)
    }, 2000);
});

---

“动画”解决方案的紧凑版本。

$.fn.scrollTo = function (speed) {
    if (typeof(speed) === 'undefined')
        speed = 1000;

    $('html, body').animate({
        scrollTop: parseInt($(this).offset().top)
    }, speed);
};

基本用法：$('#your_element').scrollTo();

---

使用 this solution，您不需要任何插件，并且除了将脚本放置在结束 </body> 标记之前，无需设置。

$("a[href^='#']").on("click", function(e) {
  $("html, body").animate({
    scrollTop: $($(this).attr("href")).offset().top
  }, 1000);
  return false;
});

if ($(window.location.hash).length > 1) {
  $("html, body").animate({
    scrollTop: $(window.location.hash).offset().top
  }, 1000);
}

在加载时，如果地址中有哈希，我们滚动到它。

并且 - 每当您点击带有 href 散列的 a 链接（例如 #top）时，我们都会滚动到它。

##编辑 2020

如果你想要一个纯 JavaScript 解决方案：你也许可以改用类似的东西：

var _scrollToElement = function (selector) {
  try {
    document.querySelector(selector).scrollIntoView({ behavior: 'smooth' });
  } catch (e) {
    console.warn(e);
  }
}

var _scrollToHashesInHrefs = function () {
  document.querySelectorAll("a[href^='#']").forEach(function (el) {
    el.addEventListener('click', function (e) {
      _scrollToElement(el.getAttribute('href'));
      return false;
    })
  })
  if (window.location.hash) {
    _scrollToElement(window.location.hash);
  }
}

_scrollToHashesInHrefs();

---

如果您只处理滚动到输入元素，则可以使用 focus()。例如，如果您想滚动到第一个可见输入：

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

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

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

感谢Tricia Ball指出这一点！

---

实现页面滚动到目标div id的简单方法

var targetOffset = $('#divID').offset().top;
$('html, body').animate({scrollTop: targetOffset}, 1000);

---

如果您想在溢出容器内滚动（而不是上面回答的 $('html, body')），也可以使用绝对定位，这就是这样做的方法：

var elem = $('#myElement'),
    container = $('#myScrollableContainer'),
    pos = elem.position().top + container.scrollTop() - container.position().top;

container.animate({
  scrollTop: pos
}

---

动画：

// slide to top of the page
$('.up').click(function () {
    $("html, body").animate({
        scrollTop: 0
    }, 600);
    return false;
});

// slide page to anchor
$('.menutop b').click(function(){
    //event.preventDefault();
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 600);
    return false;
});

// Scroll to class, div
$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#target-element").offset().top
    }, 1000);
});

// div background animate
$(window).scroll(function () {

    var x = $(this).scrollTop();

    // freezze div background
    $('.banner0').css('background-position', '0px ' + x +'px');

    // from left to right
    $('.banner0').css('background-position', x+'px ' +'0px');

    // from right to left
    $('.banner0').css('background-position', -x+'px ' +'0px');

    // from bottom to top
    $('#skills').css('background-position', '0px ' + -x + 'px');

    // move background from top to bottom
    $('.skills1').css('background-position', '0% ' + parseInt(-x / 1) + 'px' + ', 0% ' + parseInt(-x / 1) + 'px, center top');

    // Show hide mtop menu  
    if ( x > 100 ) {
    $( ".menu" ).addClass( 'menushow' );
    $( ".menu" ).fadeIn("slow");
    $( ".menu" ).animate({opacity: 0.75}, 500);
    } else {
    $( ".menu" ).removeClass( 'menushow' );
    $( ".menu" ).animate({opacity: 1}, 500);
    }

});

// progres bar animation simple
$('.bar1').each(function(i) {
  var width = $(this).data('width');  
  $(this).animate({'width' : width + '%' }, 900, function(){
    // Animation complete
  });  
});

---

在找到让我的代码工作的方法之后，我想我应该说清楚一点：对于使用：

$('html, body').animate({
   scrollTop: $("#div1").offset().top
}, 2000);

您需要位于页面顶部，因为 $("#div1").offset().top 将为您滚动到的不同位置返回不同的数字。如果您已经滚出顶部，则需要指定准确的 pageY 值（请参阅此处的 pageY 定义：https://javascript.info/coordinates）。

所以现在，问题是计算一个元素的 pageY 值。以下是滚动容器为主体的示例：

function getPageY(id) {
    let elem = document.getElementById(id);
    let box = elem.getBoundingClientRect();
    var body = document.getElementsByTagName("BODY")[0];
    return box.top + body.scrollTop; // for window scroll: box.top + window.scrollY;
}

即使您在某处滚动，上述函数也会返回相同的数字。现在，滚动回该元素：

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

---

在大多数情况下，最好使用插件。严重地。我要去tout mine here。当然，还有其他人。但是请检查他们是否真的避免了您首先想要插件的陷阱 - 并非所有人都这样做。

我已经写过使用插件 elsewhere 的原因。简而言之，这里支持大多数答案的一个衬垫

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

是糟糕的用户体验。

动画不响应用户操作。即使用户单击、轻敲或尝试滚动，它也会继续。

如果动画的起始点靠近目标元素，动画会非常缓慢。

如果目标元素放置在页面底部附近，则无法滚动到窗口顶部。然后滚动动画在中间运动中突然停止。

要处理这些问题（和 bunch of others），您可以使用我的插件 jQuery.scrollable。然后调用变为

$( window ).scrollTo( targetPosition );

就是这样。当然，还有more options。

对于目标位置，$target.offset().top 在大多数情况下都能胜任。但请注意，返回值未考虑 html 元素的边框 (see this demo)。如果在任何情况下都需要目标位置准确，最好使用

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

即使在 html 元素上设置了边框，它仍然有效。

---

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

$(function() { // 通用选择器可以在任何地方使用 $(".js-scroll-to").click(function(e) { // 动态获取 href var destination = $(this).attr(' href'); // 防止 href=“#” 链接改变 URL 哈希（可选） e.preventDefault(); // 动画滚动到目标 $('html, body').animate({ scrollTop: $(destination ).offset().top }, 500); }); });

• Item 1< /a>
• 第 2 项
• 第 3 项

---

非常简单易用的自定义 jQuery 插件。只需将属性 scroll= 添加到您的可点击元素并将其值设置为您要滚动到的选择器。

像这样：<a scroll="#product">Click me</a>。它可以用于任何元素。

(function($){
    $.fn.animateScroll = function(){
        console.log($('[scroll]'));
        $('[scroll]').click(function(){
            selector = $($(this).attr('scroll'));
            console.log(selector);
            console.log(selector.offset().top);
            $('html body').animate(
                {scrollTop: (selector.offset().top)}, //- $(window).scrollTop()
                1000
            );
        });
    }
})(jQuery);

// RUN
jQuery(document).ready(function($) {
    $().animateScroll();
});

// IN HTML EXAMPLE
// RUN ONCLICK ON OBJECT WITH ATTRIBUTE SCROLL=".SELECTOR"
// <a scroll="#product">Click To Scroll</a>

---

$('html, body').animate(...) 在 iPhone、Android、Chrome 或 Safari 浏览器中不适合我。

我必须定位页面的根内容元素。

$('#cotnent').animate(...)

这是我最终得到的结果：

if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
    $('#content').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
   }, 'slow');
}
else{
    $('html, body').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
    }, 'slow');
}

所有正文内容都与 #content div 关联

<html>
    ....
    <body>
        <div id="content">
        ...
        </div>
    </body>
</html>

---

$('html, body').animate({scrollTop: 
  Math.min( 
    $(to).offset().top-margintop, //margintop is the margin above the target
    $('body')[0].scrollHeight-$('body').height()) //if the target is at the bottom
}, 2000);

---

要显示完整元素（如果可以使用当前窗口大小）：

var element       = $("#some_element");
var elementHeight = element.height();
var windowHeight  = $(window).height();

var offset = Math.min(elementHeight, windowHeight) + element.offset().top;
$('html, body').animate({ scrollTop: offset }, 500);

---

var scrollTo = function($parent, $element) {
    var topDiff = $element.position().top - $parent.position().top;

    $parent.animate({
        scrollTop : topDiff
    }, 100);
};

---

这是来自 https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView 的 Atharva 的回答。只是想添加如果您的文档在 iframe 中，您可以在父框架中选择一个元素以滚动到视图中：

 $('#element-in-parent-frame', window.parent.document).get(0).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);
};

---

当用户使用#subject 点击该输入时，页面应该滚动到页面的最后一个元素，并带有漂亮的动画。它应该是滚动到底部而不是顶部。页面的最后一项是带有#submit 的提交按钮

$('#subject').click(function()
{
    $('#submit').focus();
    $('#subject').focus();
});

这将首先向下滚动到 #submit，然后将光标恢复到单击的输入，这模仿了向下滚动，并且适用于大多数浏览器。它也不需要 jQuery，因为它可以用纯 JavaScript 编写。

这种使用 focus 函数的方式能否通过链接 focus 调用以更好的方式模拟动画。我没有测试过这个理论，但它看起来像这样：

<style>
  #F > *
  {
    width: 100%;
  }
</style>

<form id="F" >
  <div id="child_1"> .. </div>
  <div id="child_2"> .. </div>
  ..
  <div id="child_K"> .. </div>
</form>

<script>
  $('#child_N').click(function()
  {
    $('#child_N').focus();
    $('#child_N+1').focus();
    ..
    $('#child_K').focus();

    $('#child_N').focus();
  });
</script>

---

我设置了一个模块 scroll-element npm install scroll-element。它是这样工作的：

import { scrollToElement, scrollWindowToElement } from 'scroll-element'

/* scroll the window to your target element, duration and offset optional */
let targetElement = document.getElementById('my-item')
scrollWindowToElement(targetElement)

/* scroll the overflow container element to your target element, duration and offset optional */
let containerElement = document.getElementById('my-container')
let targetElement = document.getElementById('my-item')
scrollToElement(containerElement, targetElement)

在以下 SO 帖子的帮助下编写：

没有 jquery 的元素的偏移顶部

没有 jquery 的滚动顶部动画

这是代码：

export const scrollToElement = function(containerElement, targetElement, duration, offset) {
  if (duration == null) { duration = 1000 }
  if (offset == null) { offset = 0 }

  let targetOffsetTop = getElementOffset(targetElement).top
  let containerOffsetTop = getElementOffset(containerElement).top
  let scrollTarget = targetOffsetTop + ( containerElement.scrollTop - containerOffsetTop)
  scrollTarget += offset
  scroll(containerElement, scrollTarget, duration)
}

export const scrollWindowToElement = function(targetElement, duration, offset) {
  if (duration == null) { duration = 1000 }
  if (offset == null) { offset = 0 }

  let scrollTarget = getElementOffset(targetElement).top
  scrollTarget += offset
  scrollWindow(scrollTarget, duration)
}

function scroll(containerElement, scrollTarget, duration) {
  let scrollStep = scrollTarget / (duration / 15)
  let interval = setInterval(() => {
    if ( containerElement.scrollTop < scrollTarget ) {
      containerElement.scrollTop += scrollStep
    } else {
      clearInterval(interval)
    }
  },15)
}

function scrollWindow(scrollTarget, duration) {
  let scrollStep = scrollTarget / (duration / 15)
  let interval = setInterval(() => {
    if ( window.scrollY < scrollTarget ) {
      window.scrollBy( 0, scrollStep )
    } else {
      clearInterval(interval)
    }
  },15)
}

function getElementOffset(element) {
  let de = document.documentElement
  let box = element.getBoundingClientRect()
  let top = box.top + window.pageYOffset - de.clientTop
  let left = box.left + window.pageXOffset - de.clientLeft
  return { top: top, left: left }
}

---

截至 2019 年的更新答案：

$('body').animate({
    scrollTop: $('#subject').offset().top - $('body').offset().top + $('body').scrollTop()
}, 'fast');

---

单线器

subject.onclick = e=> window.scroll({ top: submit.offsetTop, behavior: 'smooth'});

subject.onclick = e=> window.scroll({top: submit.offsetTop, behavior: 'smooth'}); .box,.foot{display: flex;background:#fdf;padding:500px 0} .foot{padding:250px}

---

对于它的价值，这就是我设法为可以在带有滚动的 DIV 内的一般元素实现这种行为的方法。在我们的例子中，我们不滚动整个正文，而只是滚动带有溢出的特定元素： auto;在更大的布局内。

它创建一个目标元素高度的假输入，然后将焦点放在它上面，无论您在可滚动层次结构中有多深，浏览器都会处理其余部分。奇迹般有效。

var $scrollTo = $('#someId'),
inputElem = $('<input type="text"></input>');

$scrollTo.prepend(inputElem);
inputElem.css({
  position: 'absolute',
  width: '1px',
  height: $scrollTo.height()
});
inputElem.focus();
inputElem.remove();

---

这对我有用：

var targetOffset = $('#elementToScrollTo').offset().top;
$('#DivParent').animate({scrollTop: targetOffset}, 2500);

---