单击锚链接时平滑滚动

2018 年 4 月更新：现在有a native way to do this：

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;
});

---

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

---

正确的语法是：

//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^=\\# 的解释：

^ 表示它匹配包含 # 字符的内容。因此，仅匹配锚点以确保它是同一页面的链接（感谢 Peter Wong 的建议）。

\\ 是因为 # 是 css 选择器中的特殊字符，所以我们必须对其进行转义。

---

只有 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 等）都支持此功能。

如需详细了解，请阅读此article

---

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

这对我来说很完美

---

我很惊讶没有人发布一个本机解决方案，该解决方案还负责更新浏览器位置哈希以匹配。这里是：

let anchorlinks = document.querySelectorAll('a[href^="#"]')
 
for (let item of anchorlinks) { // relitere 
    item.addEventListener('click', (e)=> {
        let hashval = item.getAttribute('href')
        let target = document.querySelector(hashval)
        target.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
        })
        history.pushState(null, null, hashval)
        e.preventDefault()
    })
}

见教程：http://www.javascriptkit.com/javatutors/scrolling-html-bookmark-javascript.shtml

对于带有粘性标题的网站，scroll-padding-top CSS 可用于提供偏移量。

---

我建议你制作这个通用代码：

$('a[href^="#"]').click(function(){

var the_id = $(this).attr("href");

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

return false;});

您可以在这里看到一篇非常好的文章：jquery-effet-smooth-scroll-defilement-fluide

---

这里已经有很多很好的答案 - 但是他们都忽略了必须排除空锚的事实。否则，一旦单击空锚点，这些脚本就会生成 JavaScript 错误。

在我看来，正确的答案是这样的：

$('a[href*=\\#]:not([href$=\\#])').click(function() {
    event.preventDefault();

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

---

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

html{
scroll-behavior: smooth;
}

---

$(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;
      }
    }
  });
});

官方：http://css-tricks.com/snippets/jquery/smooth-scrolling/

---

对 hash id 滚动的平滑滚动有原生支持。

html {
  scroll-behavior: smooth;
}

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

---

使用 JQuery：

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

---

如需更全面的平滑滚动方法列表，请参阅我的答案 here。

您可以将 window.scroll() 与 behavior: smooth 和 top 设置为锚标记的偏移顶部一起使用，以确保锚标记位于视口的顶部。

document.querySelectorAll('a[href^="#"]').forEach(a => {
    a.addEventListener('click', function (e) {
        e.preventDefault();
        var href = this.getAttribute("href");
        var elem = document.querySelector(href)||document.querySelector("a[name="+href.substring(1, href.length)+"]");
        //gets Element with an id of the link's href 
        //or an anchor tag with a name attribute of the href of the link without the #
        window.scroll({
            top: elem.offsetTop, 
            left: 0, 
            behavior: 'smooth' 
        });
        //if you want to add the hash to window.location.hash
        //you will need to use setTimeout to prevent losing the smooth scrolling behavior
       //the following code will work for that purpose
       /*setTimeout(function(){
            window.location.hash = this.hash;
        }, 2000); */
    });
});

演示：

a, a:visited{ 颜色: 蓝色; } section{ 边距：500px 0px;文本对齐：居中； } 第 1 节
第 2 节
第 3 节
第 4 节

第 1 节

Lorem ipsum dolor sit amet, et vis laudem utroque, iusto forensibus neglegentur eu duo。 Eu pro fuisset salutandi 哲学，谨慎的迫害。 Eos ad quodsi dissentias, ei odio viris signiferumque mei。 Putent iuvaret perpetua nec 欧盟。没有 ornatus vivendum。 Adhuc nonumes ex vim, in suas rebum graecis mei, usu ad causae recusabo。 Idque vituperata vel ea。 Veri verterem pro ex。 Ad error omnes est, id sit lorem legendos。 Eos vidit ullum ne, tale tantas omittam est ut。 Nobis maiorum efficiendi eu mei。 Eos et debet placerat signiferumque。符合欧盟规定的电子产品。 Impetus percipit menandri te ius, mea ne stet posse fabellas。 Aliquid corrumpit vel no, mei in diam praesent contentiones。 Qui veniam suscipit probatus ex。没有 autem homero perfecto quo，eos choro facilis ut。 Te quo cibo 的兴趣。 Vel verear praesent in, menandri deserunt ad his. Labore admodum consetetur 等。 Possit facilisi eu sed, lorem iriure eum id, pri ei consul necessitatibus。 Est te iusto epicuri。 Vis no graece putent mentitum, rebum facete offendit nec in。在 duis vivendo sed, vel id enim voluptatibus。 Velit sanctus ne mel，quem sumo suavitate mel cu，mea ea nullam feugiat。 Tincidunt suscipiantur 没有亲。 Vel ut novum mucius molestie，ut tale ipsum intellegebat mei，mazim accumsan voluptaria ea nam。 Posidonium theophrastus ut sea, stet viris hendrerit pro ex, sonet mentitum ne quo。 Vim duis feugiat ex, nec eu probo doming persecuti。 Velit zril nam in, est commodo splendide id。 Et aperiri fuisset iracundia usu。 Eu nec iusto audire repudiare.

Section 2

Lorem ipsum dolor sit amet, et vis laudem utroque, iusto forensibus neglegentur eu duo。 Eu pro fuisset salutandi 哲学，谨慎的迫害。 Eos ad quodsi dissentias, ei odio viris signiferumque mei。 Putent iuvaret perpetua nec 欧盟。没有 ornatus vivendum。 Adhuc nonumes ex vim, in suas rebum graecis mei, usu ad causae recusabo。 Idque vituperata vel ea。 Veri verterem pro ex。 Ad error omnes est, id sit lorem legendos。 Eos vidit ullum ne, tale tantas omittam est ut。 Nobis maiorum efficiendi eu mei。 Eos et debet placerat signiferumque。符合欧盟规定的电子产品。 Impetus percipit menandri te ius, mea ne stet posse fabellas。 Aliquid corrumpit vel no, mei in diam praesent contentiones。 Qui veniam suscipit probatus ex。没有 autem homero perfecto quo，eos choro facilis ut。 Te quo cibo 的兴趣。 Vel verear praesent in, menandri deserunt ad his. Labore admodum consetetur 等。 Possit facilisi eu sed, lorem iriure eum id, pri ei consul necessitatibus。 Est te iusto epicuri。 Vis no graece putent mentitum, rebum facete offendit nec in。在 duis vivendo sed, vel id enim voluptatibus。 Velit sanctus ne mel，quem sumo suavitate mel cu，mea ea nullam feugiat。 Tincidunt suscipiantur 没有亲。 Vel ut novum mucius molestie，ut tale ipsum intellegebat mei，mazim accumsan voluptaria ea nam。 Posidonium theophrastus ut sea, stet viris hendrerit pro ex, sonet mentitum ne quo。 Vim duis feugiat ex, nec eu probo doming persecuti。 Velit zril nam in, est commodo splendide id。 Et aperiri fuisset iracundia usu。 Eu nec iusto audire repudiare.

Section 3

Lorem ipsum dolor sit amet, et vis laudem utroque, iusto forensibus neglegentur eu duo。 Eu pro fuisset salutandi 哲学，谨慎的迫害。 Eos ad quodsi dissentias, ei odio viris signiferumque mei。 Putent iuvaret perpetua nec 欧盟。没有 ornatus vivendum。 Adhuc nonumes ex vim, in suas rebum graecis mei, usu ad causae recusabo。 Idque vituperata vel ea。 Veri verterem pro ex。 Ad error omnes est, id sit lorem legendos。 Eos vidit ullum ne, tale tantas omittam est ut。 Nobis maiorum efficiendi eu mei。 Eos et debet placerat signiferumque。符合欧盟规定的电子产品。 Impetus percipit menandri te ius, mea ne stet posse fabellas。 Aliquid corrumpit vel no, mei in diam praesent contentiones。 Qui veniam suscipit probatus ex。没有 autem homero perfecto quo，eos choro facilis ut。 Te quo cibo 的兴趣。 Vel verear praesent in, menandri deserunt ad his. Labore admodum consetetur 等。 Possit facilisi eu sed, lorem iriure eum id, pri ei consul necessitatibus。 Est te iusto epicuri。 Vis no graece putent mentitum, rebum facete offendit nec in。在 duis vivendo sed, vel id enim voluptatibus。 Velit sanctus ne mel，quem sumo suavitate mel cu，mea ea nullam feugiat。 Tincidunt suscipiantur 没有亲。 Vel ut novum mucius molestie，ut tale ipsum intellegebat mei，mazim accumsan voluptaria ea nam。 Posidonium theophrastus ut sea, stet viris hendrerit pro ex, sonet mentitum ne quo。 Vim duis feugiat ex, nec eu probo doming persecuti。 Velit zril nam in, est commodo splendide id。 Et aperiri fuisset iracundia usu。 Eu nec iusto audire repudiare.

Section 4 （这是一个锚标签，不是一个section）

Lorem ipsum dolor sit amet, et vis laudem utroque, iusto forensibus neglegentur eu duo。 Eu pro fuisset salutandi 哲学，谨慎的迫害。 Eos ad quodsi dissentias, ei odio viris signiferumque mei。 Putent iuvaret perpetua nec 欧盟。没有 ornatus vivendum。 Adhuc nonumes ex vim, in suas rebum graecis mei, usu ad causae recusabo。 Idque vituperata vel ea。 Veri verterem pro ex。 Ad error omnes est, id sit lorem legendos。 Eos vidit ullum ne, tale tantas omittam est ut。 Nobis maiorum efficiendi eu mei。 Eos et debet placerat signiferumque。符合欧盟规定的电子产品。 Impetus percipit menandri te ius, mea ne stet posse fabellas。 Aliquid corrumpit vel no, mei in diam praesent contentiones。 Qui veniam suscipit probatus ex。没有 autem homero perfecto quo，eos choro facilis ut。 Te quo cibo 的兴趣。 Vel verear praesent in, menandri deserunt ad his. Labore admodum consetetur 等。 Possit facilisi eu sed, lorem iriure eum id, pri ei consul necessitatibus。 Est te iusto epicuri。 Vis no graece putent mentitum, rebum facete offendit nec in。在 duis vivendo sed, vel id enim voluptatibus。 Velit sanctus ne mel，quem sumo suavitate mel cu，mea ea nullam feugiat。 Tincidunt suscipiantur 没有亲。 Vel ut novum mucius molestie，ut tale ipsum intellegebat mei，mazim accumsan voluptaria ea nam。 Posidonium theophrastus ut sea, stet viris hendrerit pro ex, sonet mentitum ne quo。 Vim duis feugiat ex, nec eu probo doming persecuti。 Velit zril nam in, est commodo splendide id。 Et aperiri fuisset iracundia usu。 Eu nec iusto audire repudiare.