如果你在页面上有一个简单的按钮可以向下滚动到一个div，并且希望返回按钮通过跳到顶部来工作，只需添加以下代码:

$(window).on('hashchange', function(event) {
    if (event.target.location.hash=="") {
        window.scrollTo(0,0);
    }
});

这也可以扩展到跳转到不同的div，通过读取哈希值，并像Joseph Silbers的答案一样滚动。

$(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/

以下是我为多个链接和锚点实现的解决方案，用于平滑滚动:

http://www.adriantomic.se/development/jquery-localscroll-tutorial/ 如果你在导航div中设置了导航链接，并声明了这样的结构:

<a href = "#destinationA">

和你相应的锚标签目的地如下:

<a id = "destinationA">

然后把这个加载到文档的头部:

    <!-- Load jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<!-- Load ScrollTo -->
<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>

<!-- Load LocalScroll -->
<script src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>

<script type = "text/javascript">
 $(document).ready(function()
    {
        // Scroll the whole document
        $('#menuBox').localScroll({
           target:'#content'
        });
    });
</script>

感谢@Adriantomic

添加:

function () {
    window.location.hash = href;
}

是否使垂直偏移量无效

top - 72

Firefox和IE浏览器，但Chrome浏览器没有。基本上，页面平滑地滚动到基于偏移量它应该停止的位置，但然后向下跳转到没有偏移量的页面所在的位置。

它确实将哈希添加到url的末尾，但按下back并不会让你回到顶部，它只是从url中删除哈希，并留下它所在的查看窗口。

这是我使用的完整js:

var $root = $('html, body');
$('a').click(function() {
    var href = $.attr(this, 'href');
    $root.animate({
        scrollTop: $(href).offset().top - 120
    }, 500, function () {
        window.location.hash = href;
    });
    return false;
});

对于正在寻找ReactJS (TypeScript)方法的用户。

function Hero() {
  const scrollToView = (e: any) => {
    e.preventDefault();
    // Scroll to a certain element
    document.getElementById("about-section")?.scrollIntoView({
      behavior: "smooth",
    });
  };
  return (
    <section id="hero">
        <button
          onClick={scrollToView} 
        >
          Learn More
        </button>    
    </section>
  );
}

export default Hero;

以及about-section组件

const AboutSection = () => {
  return (
    <section id="about-section"  >
      <h1>About Section</h1>
    </section>
  );
};

export default AboutSection;

有一种css方法可以使用scroll-behavior来做到这一点。添加以下属性。

    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:请检查浏览器兼容性。