本机支持在哈希id滚动上平滑滚动。

html {
  scroll-behavior: smooth;
}

大家可以看看:https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2

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

这对我来说是完美的

只有CSS

html {
    scroll-behavior: smooth;
}

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

程序化:一些额外的和高级的东西

// Scroll to specific values
// window.scrollTo or window.scroll
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等)都支持此功能。

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

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{}中时，它终于工作了。

我对"/xxxxx#asdf"和"#asdf" href锚都这样做了

$("a[href*=#]").on('click', function(event){
    var href = $(this).attr("href");
    if ( /(#.*)/.test(href) ){
      var hash = href.match(/(#.*)/)[0];
      var path = href.match(/([^#]*)/)[0];

      if (window.location.pathname == path || path.length == 0){
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 1000);
        window.location.hash = hash;
      }
    }
});

不需要任何js只是使用滚动行为:平滑的html标签就是这样

html{
scroll-behavior: smooth;
}