单击锚点链接时平滑滚动

thanks for sharing, Joseph Silber. Here your 2018 solution as ES6 with a minor change to keep the standard behavior (scroll to top):

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

    const targetElement = document.querySelector(this.getAttribute("href"));
    targetElement.scrollIntoView({
      block: "start",
      alignToTop: true,
      behavior: "smooth"
    });
  });
});

原生支持哈希ID滚动的平滑滚动。

html {
  scroll-behavior: smooth;
}

您可以看一下：https : //www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2

$("a").on("click", function(event){
    //check the value of this.hash
    if(this.hash !== ""){
        event.preventDefault();

        $("html, body").animate({scrollTop:$(this.hash).offset().top}, 500);

        //add hash to the current scroll position
        window.location.hash = this.hash;

    }



});

使用滚动行为可以做到这一点。添加以下属性。

    scroll-behavior: smooth;

就是这样。不需要JS。

a {
  display: inline-block;
  width: 50px;
  text-decoration: none;
}
nav, scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px;
  border: 1px solid black;
}
scroll-container {
  display: block;
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
}

<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<scroll-container>
  <scroll-page id="page-1">1</scroll-page>
  <scroll-page id="page-2">2</scroll-page>
  <scroll-page id="page-3">3</scroll-page>
</scroll-container>

PS：请检查浏览器兼容性。

如今，现代浏览器要快一些。setInterval可能有效。如今，该功能在Chrome和Firefox上运行良好。（Safari的浏览速度有些慢，IE对此并不打扰）

function smoothScroll(event) {
    if (event.target.hash !== '') { //Check if tag is an anchor
        event.preventDefault()
        const hash = event.target.hash.replace("#", "")
        const link = document.getElementsByName(hash) 
        //Find the where you want to scroll
        const position = link[0].getBoundingClientRect().y 
        let top = 0

        let smooth = setInterval(() => {
            let leftover = position - top
            if (top === position) {
                clearInterval(smooth)
            }

            else if(position > top && leftover < 10) {
                top += leftover
                window.scrollTo(0, top)
            }

            else if(position > (top - 10)) {
                top += 10
                window.scrollTo(0, top)
            }

        }, 6)//6 milliseconds is the faster chrome runs setInterval
    }
}

只有CSS

html {
    scroll-behavior: smooth !important;
}

您只需要添加此内容。现在，内部链接的滚动行为将像流一样平滑。

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

要了解详细信息，请阅读本文

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

html{scroll-behavior:smooth}

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

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

顺便说一句，我花了几个小时试图使它工作。在一些晦涩的注释部分找到了解决方案。这是越野车，无法在某些标签中使用。在体内没有作用。当我将它放在CSS文件的html {}中时，它终于可以工作了。