很好的解决方案由jAndy，但平滑滚动似乎有问题在Firefox中工作。

在Firefox中也可以这样编写。

(function($) {
    $(document).ready(function() {
         $('html, body').animate({
           'scrollTop':   $('#anchorName2').offset().top
         }, 2000);
    });
})(jQuery);

这是一个没有jQuery的纯JavaScript解决方案。它在Chrome和ie浏览器上进行了测试，但没有在iOS上进行测试。

function ScrollTo(name) {
  ScrollToResolver(document.getElementById(name));
}

function ScrollToResolver(elem) {
  var jump = parseInt(elem.getBoundingClientRect().top * .2);
  document.body.scrollTop += jump;
  document.documentElement.scrollTop += jump;
  if (!elem.lastjump || elem.lastjump > Math.abs(jump)) {
    elem.lastjump = Math.abs(jump);
    setTimeout(function() { ScrollToResolver(elem);}, "100");
  } else {
    elem.lastjump = null;
  }
}

演示:https://jsfiddle.net/jd7q25hg/12/

jQuery(“[href ^ = ' # ']”).click(函数(){ jQuery (html、身体).animate ({ jQuery(jQuery(this).attr('href')).offset().top }, 1000); 返回错误; })；

要让浏览器滚动页面到给定的锚点，最简单的方法是在style.css文件中添加*{scroll-behavior: smooth;}，在HTML导航中使用# nameofsection。

* {scroll-behavior:光滑;} <a href="# Scroll -to">点击滚动<a/> < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 <节id = "滚动到" > <p>它将向下滚动到这个部分</p> < / >节

平稳滚动到适当的位置

得到正确的y坐标并使用window。scrollTo({top: y，行为:'平滑'})

const id = 'anchorName2';
const yourElement = document.getElementById(id);
const y = yourElement.getBoundingClientRect().top + window.pageYOffset;

window.scrollTo({top: y, behavior: 'smooth'});

很好的解决方案由jAndy，但平滑滚动似乎有问题在Firefox中工作。

在Firefox中也可以这样编写。

(function($) {
    $(document).ready(function() {
         $('html, body').animate({
           'scrollTop':   $('#anchorName2').offset().top
         }, 2000);
    });
})(jQuery);