你可以使用jQuery的.animate()， .offset()和scrollTop。就像

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

示例链接:http://jsbin.com/unasi3/edit

如果你不想动画，使用.scrollTop():

$(document.body).scrollTop($('#anchorName2').offset().top);

或者JavaScript的原生位置。散列:

location.hash = '#' + anchorid;

2018-2020纯JavaScript:

有一个非常方便的方法来滚动到元素:

el.scrollIntoView({
  behavior: 'smooth', // smooth scroll
  block: 'start' // the upper border of the element will be aligned at the top of the visible part of the window of the scrollable area.
})

但据我了解，它并没有下面的选项那么好的支持。

了解更多关于该方法的信息。

如果元素必须在顶部:

const element = document.querySelector('#element')
const topPos = element.getBoundingClientRect().top + window.pageYOffset

window.scrollTo({
  top: topPos, // scroll so that the element is at the top of the view
  behavior: 'smooth' // smooth scroll
})

CodePen上的演示示例

如果你想让元素在中间:

const element = document.querySelector('#element')
const rect = element.getBoundingClientRect() // get rects(width, height, top, etc)
const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

window.scroll({
  top: rect.top + rect.height / 2 - viewHeight / 2,
  behavior: 'smooth' // smooth scroll
});

CodePen上的演示示例

支持:

他们写道，scroll是与scrollTo相同的方法，但在scrollTo中支持更好。

关于方法的更多信息。

你可以使用jQuery的.animate()， .offset()和scrollTop。就像

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

示例链接:http://jsbin.com/unasi3/edit

如果你不想动画，使用.scrollTop():

$(document.body).scrollTop($('#anchorName2').offset().top);

或者JavaScript的原生位置。散列:

location.hash = '#' + anchorid;

如此:

$('.scroll').on("click", function(e) {

  e.preventDefault();

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

  $("html, body").animate({

    'scrollTop':   $(dest).offset().top

  }, 2000);

});

https://jsfiddle.net/68pnkfgd/

只需添加类'scroll'到任何你想要动画的链接

要让浏览器滚动页面到给定的锚点，最简单的方法是在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> < / >节

在2018年，你不需要jQuery来做这样简单的事情。内置scrollIntoView()方法支持一个“behavior”属性，可以平滑地滚动到页面上的任何元素。您甚至可以用散列更新浏览器URL，使其可收藏。

从这个关于滚动HTML书签的教程中，这里有一个本地的方法来自动添加平滑滚动到页面上的所有锚链接:

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