2018 年 4 月更新：现在有一种本地方法可以做到这一点：

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

这目前仅在最前沿的浏览器中受支持。

对于较旧的浏览器支持，您可以使用以下 jQuery 技术：

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
});

这是小提琴：http : //jsfiddle.net/9SDLw/

如果您的目标元素没有 ID，并且您通过它的 链接到它name，请使用：

$('a[href^="#"]').click(function () {
    $('html, body').animate({
        scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
    }, 500);

    return false;
});

为了提高性能，您应该缓存该$('html, body')选择器，这样它就不会在每次单击锚点时运行：

var $root = $('html, body');

$('a[href^="#"]').click(function () {
    $root.animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);

    return false;
});

如果您希望更新 URL，请在animate回调中执行此操作：

var $root = $('html, body');

$('a[href^="#"]').click(function() {
    var href = $.attr(this, 'href');

    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });

    return false;
});

正确的语法是：

//Smooth scrolling with links
$('a[href*=\\#]').on('click', function(event){     
    event.preventDefault();
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});

// Smooth scrolling when the document is loaded and ready
$(document).ready(function(){
  $('html,body').animate({scrollTop:$(location.hash).offset().‌​top}, 500);
});

简化：干

function smoothScrollingTo(target){
  $('html,body').animate({scrollTop:$(target).offset().​top}, 500);
}
$('a[href*=\\#]').on('click', function(event){     
    event.preventDefault();
    smoothScrollingTo(this.hash);
});
$(document).ready(function(){
  smoothScrollingTo(location.hash);
});

的解释href*=\\#：

• *意味着它匹配包含#字符的内容。因此只匹配anchors。有关此含义的更多信息，请参见此处
• \\是因为#css 选择器中的特殊字符，所以我们必须转义它。

CSS3 中的新热点。这比此页面上列出的每种方法都要容易得多，并且不需要 Javascript。只需在您的 css 中输入以下代码，突然间指向您自己页面内位置的链接将具有平滑的滚动动画。

html{scroll-behavior:smooth}

之后，指向 div 的任何链接都将平滑地滑到这些部分。

<a href="#section">Section1</a>

编辑：对于那些对上述标签感到困惑的人。基本上它是一个可点击的链接。然后你可以在你的网页中的某个地方有另一个 div 标签，比如

<div id="section">content</div>

在这方面，a 链接将是可点击的，并将转到任何 #section，在这种情况下，它是我们称为 section 的 div。

顺便说一句，我花了几个小时试图让它发挥作用。在一些晦涩的评论部分找到了解决方案。它有问题，在某些标签中不起作用。对身体不起作用。当我把它放在 CSS 文件的 html{} 中时，它终于奏效了。

只有 CSS

html {
    scroll-behavior: smooth !important;
}

所有你需要添加的只是这个。现在您的内部链接滚动行为将像流一样流畅。

以编程方式：一些额外和高级的东西

// Scroll to specific values
// window.scrollTo or
window.scroll({
  top: 1000, 
  left: 0, 
  behavior: 'smooth'
});

// Scroll certain amounts from current position 
window.scrollBy({ 
  top: 250, // could be negative value
  left: 0, 
  behavior: 'smooth' 
});

// Scroll to a certain element
document.getElementById('el').scrollIntoView({
  behavior: 'smooth'
})

注：所有最新的浏览器（Opera，Chrome，Firefox等）支持此功能。

详细了解，请阅读这篇文章

$('a[href*=#]').click(function(event){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    event.preventDefault();
});

这对我来说很完美