大多数答案都不必要地复杂。

如果你只想跳转到目标元素，你不需要JavaScript:

# the link:
<a href="#target">Click here to jump.</a>

# target element:
<div id="target">Any kind of element.</div>

如果你想动画地滚动到目标，请参考5hahiL的答案。

2018-2020纯JavaScript:

有一个非常方便的方法来滚动到元素:

el.scrollIntoView({
  behavior: 'smooth', // smooth scroll
  block: 'start' // the upper border of the element will be aligned at the top of the visible part of the window of the scrollable area.
})

但据我了解，它并没有下面的选项那么好的支持。

了解更多关于该方法的信息。

如果元素必须在顶部:

const element = document.querySelector('#element')
const topPos = element.getBoundingClientRect().top + window.pageYOffset

window.scrollTo({
  top: topPos, // scroll so that the element is at the top of the view
  behavior: 'smooth' // smooth scroll
})

CodePen上的演示示例

如果你想让元素在中间:

const element = document.querySelector('#element')
const rect = element.getBoundingClientRect() // get rects(width, height, top, etc)
const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

window.scroll({
  top: rect.top + rect.height / 2 - viewHeight / 2,
  behavior: 'smooth' // smooth scroll
});

CodePen上的演示示例

支持:

他们写道，scroll是与scrollTo相同的方法，但在scrollTo中支持更好。

关于方法的更多信息。

jQuery(“[href ^ = ' # ']”).click(函数(){ jQuery (html、身体).animate ({ jQuery(jQuery(this).attr('href')).offset().top }, 1000); 返回错误; })；

CSS-Tricks的解决方案不再适用于jQuery 2.2.0。它将抛出一个选择器错误:

JavaScript运行时错误:语法错误，无法识别表达式:a[href*=#]:not([href=#])

我通过改变选择器来修复它。完整的片段如下:

$(function() {
  $("a[href*='#']:not([href='#'])").click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
    if (target.length) {
      $('html,body').animate({
        scrollTop: target.offset().top
      }, 1000);
      return false;
    }
  }
 });
});

很好的解决方案由jAndy，但平滑滚动似乎有问题在Firefox中工作。

在Firefox中也可以这样编写。

(function($) {
    $(document).ready(function() {
         $('html, body').animate({
           'scrollTop':   $('#anchorName2').offset().top
         }, 2000);
    });
})(jQuery);

大多数答案都不必要地复杂。

如果你只想跳转到目标元素，你不需要JavaScript:

# the link:
<a href="#target">Click here to jump.</a>

# target element:
<div id="target">Any kind of element.</div>

如果你想动画地滚动到目标，请参考5hahiL的答案。