没有 jQuery 的平滑滚动锚链接

Vanilla js 变体，使用 requestAnimationFrame，支持所有浏览器:

const requestAnimationFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame;


function scrollTo(to) {
const start = window.scrollY || window.pageYOffset
const time = Date.now()
const duration = Math.abs(start - to) / 3;


(function step() {
var dx = Math.min(1, (Date.now() - time) / duration)
var pos = start + (to - start) * easeOutQuart(dx)


window.scrollTo(0, pos)


if (dx < 1) {
requestAnimationFrame(step)
}
})()
}

支持任何 放松！

试试这里的代码:

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

对于2019年的任何人来说, 首先，添加一个事件侦听器

  document.getElementById('id').addEventListener('click', () => scrollTo())

然后你瞄准元素，顺利地到达它

function scrollTo() {
let target = document.getElementById('target');
target.scrollIntoView({
behavior: "smooth",
block: "end",
inline: "nearest"
})
}

这是一个相当老的问题，但是重要的是现在 CSS 支持平滑滚动，所以不需要任何脚本:

html {
scroll-behavior: smooth;
}

正如 @ Andiih指出的那样，截至2022年底，这方面的 完全支持浏览器已经存在。

基于 MDN 文件的滚动选项，我们可以使用以下代码:

element.scrollTo({
top: 100,
left: 100,
behavior: 'smooth'
});

事实上，behavior键可以接受 smooth和 auto变量。第一个是平稳运动，第二个是单跳。

有关平滑滚动的更全面的方法列表，请参见我的答案 给你。

为了在一定的时间内滚动到一定的位置，可以使用 window.requestAnimationFrame，每次计算适当的电流位置。当不支持 requestAnimationFrame时，可以使用 setTimeout达到类似的效果。

/*
@param pos: the y-position to scroll to (in pixels)
@param time: the exact amount of time the scrolling will take (in milliseconds)
*/
function scrollToSmoothly(pos, time) {
var currentPos = window.pageYOffset;
var start = null;
if(time == null) time = 500;
pos = +pos, time = +time;
window.requestAnimationFrame(function step(currentTime) {
start = !start ? currentTime : start;
var progress = currentTime - start;
if (currentPos < pos) {
window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos);
} else {
window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time));
}
if (progress < time) {
window.requestAnimationFrame(step);
} else {
window.scrollTo(0, pos);
}
});
}

演示:

function scrollToSmoothly(pos, time) {
var currentPos = window.pageYOffset;
var start = null;
if(time == null) time = 500;
pos = +pos, time = +time;
window.requestAnimationFrame(function step(currentTime) {
start = !start ? currentTime : start;
var progress = currentTime - start;
if (currentPos < pos) {
window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos);
} else {
window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time));
}
if (progress < time) {
window.requestAnimationFrame(step);
} else {
window.scrollTo(0, pos);
}
});
}


document.getElementById("toElement").addEventListener('click', function(e) {
var elem = document.querySelector("div");
scrollToSmoothly(elem.offsetTop);
});
document.getElementById("toTop").addEventListener('click', function(e){
scrollToSmoothly(0, 700);
});

<button id="toElement">Scroll To Element</button>
<div style="margin: 1000px 0px; text-align: center;">Div element
<button id="toTop">Scroll back to top</button>
</div>

对于更复杂的情况，可以使用 SmoothScroll.js 库，它可以处理垂直和水平的平滑滚动、在其他容器元素内部滚动、不同的放松行为、从当前位置相对滚动等等。

document.getElementById("toElement").addEventListener('click', function(e) {
smoothScroll({toElement: document.querySelector('div'), duration: 500});
});
document.getElementById("toTop").addEventListener('click', function(e){
smoothScroll({yPos: 0, duration: 700});
});

<script src="https://cdn.jsdelivr.net/gh/LieutenantPeacock/SmoothScroll@1.2.0/src/smoothscroll.min.js" integrity="sha384-UdJHYJK9eDBy7vML0TvJGlCpvrJhCuOPGTc7tHbA+jHEgCgjWpPbmMvmd/2bzdXU" crossorigin="anonymous"></script>
<button id="toElement">Scroll To Element</button>
<div style="margin: 1000px 0px; text-align: center;">Div element
<button id="toTop">Scroll back to top</button>
</div>

或者，您可以将选项对象传递给 window.scroll，它可以滚动到特定的 x 和 y 位置，而 window.scrollBy可以从当前位置滚动一定量:

// Scroll to specific values
// scrollTo is the same
window.scroll({
top: 2500,
left: 0,
behavior: 'smooth'
});


// Scroll certain amounts from current position
window.scrollBy({
top: 100, // could be negative value
left: 0,
behavior: 'smooth'
});

演示:

<button onClick="scrollToDiv()">Scroll To Element</button>
<div style="margin: 500px 0px;">Div</div>
<script>
function scrollToDiv(){
var elem = document.querySelector("div");
window.scroll({
top: elem.offsetTop,
left: 0,
behavior: 'smooth'
});
}
</script>

现代浏览器支持 属性，它可以使文档中的滚动变得平滑(不需要 JavaScript)。锚标记可以通过给锚标记一个 href的 #加上要滚动到的元素的 id来实现)。您还可以为特定容器(如 div)设置 scroll-behavior属性，以使其内容顺利滚动。

html, body{
scroll-behavior: smooth;
}

<a href="#elem">Scroll To Element</a>
<div id="elem" style="margin: 500px 0px;">Div</div>

没有 JQuery

const links = document.querySelectorAll('header nav ul a')


for (const link of links) {
link.onclick = function clickHandler(e) {
e.preventDefault()
const href = this.getAttribute('href')
document.querySelector(href).scrollIntoView({ behavior: 'smooth' })
}
}

  body {
background-color: black;
height:7000px
}


header {
margin-top: 1.3rem;
margin-bottom: 25rem;
display: flex;
justify-content: center;
align-items: center;
}


nav ul {
display: flex;
}


nav ul li {
all: unset;
margin: 2rem;
cursor: pointer;
}


nav ul li a {
all: unset;
font: bold 1.8rem robto;
color: white;
letter-spacing: 1px;
cursor: pointer;
padding-top: 3rem;
padding-bottom: 2rem;
}


#team,
#contact,
#about {
background-color: #e2df0d;
width: 100%;
height: 35rem;
display: flex;
justify-content: center;
align-items: center;
color: black;
font: bold 4rem roboto;
letter-spacing: 6.2px;
margin-top: 70rem;


}

<header>
<!-- NavBar -->
<nav>
<ul>
<li><a href="#team">Team</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>


<!-- ----------- Team ----------------------- -->
<div id="team">
<h2>Team</h2>
</div>


<!-- ----------- Contact ----------------------- -->
<div id="contact">
<h2>Contact</h2>
</div>


<!-- ----------- About ----------------------- -->
<div id="about">
<h2>About</h2>
</div>

或者只支持 CSS，但是还不是所有的浏览器都支持它

html {scroll-behavior: smooth}

如果你想设置你所有的深层链接 #顺利滚动，你可以这样做:

const allLinks = document.querySelectorAll('a[href^="#"]')
allLinks.forEach(link => {


const
targetSelector = link.getAttribute('href'),
target = document.querySelector(targetSelector)


if (target) {
link.addEventListener('click', function(e) {


e.preventDefault()


const top = target.offsetTop // consider decreasing your main nav's height from this number


window.scroll({
behavior: 'smooth',
left: 0,
top: top
});


})
}
})

一个示例代码，也考虑你的主导航的高度(这个代码去哪里 top常量声明) :

const
mainHeader = document.querySelector('header#masthead'), //change to your correct main nav selector
mainHeaderHeight = mainHeader.offsetHeight,
// now calculate top like this:
top = target.offsetTop - mainHeaderHeight

二零二二年三月

我知道这是一个古老的问题，但想提出一个答案，有更简单的方法在现代做到这一点。到目前为止，几乎所有的主流浏览器都与 scroll-behavior兼容，包括最新版本的 Safari。不过，您可能希望使用备份方法，或者仅仅使用方法2中描述的 javascript 方法来兼容旧的浏览器。

方法1: HTML 和 CSS

你可以这样做

<a href="#target" id="scroll-trigger">Click</a>
.
.
.
<h2 id="target">Target</h2>

和 CSS

html {
scroll-behavior: smooth
}

方法2: JavaScript

或者，如果您有一个需要 javascript 的独特案例，请继续详细说明这个方法。

const scrollTrigger = document.getElementById('scroll-trigger');
const target = document.getElementById('target');


scrollTrigger.addEventListener('click', function (e) {
window.scroll({
top: target.offsetTop,
left:0,
behavior: 'smooth' });
}, false)

这里是最优雅和简洁的解决方案。

相关网址:

<a href="#elementIDtoScrollTo"></a>

CSS:

html {
scroll-behavior: smooth;
}

记住向每个 HTML 元素添加唯一的 id="elementIDtoScrollTo"。