我是js的新手。
我在我的大学项目中需要基于<a>
标签href属性来滚动页面。
由于我的项目是单页应用程序,因此ScrollTop功能无法正常工作。我可以使用窗口scrollTo(x坐标,y坐标) 功能来实现。
但现在问题是我想在页面中创建平滑滚动效果。
如何在scrollTo(x,y)函数中实现?
先行致谢。 :)
我是js的新手。
我在我的大学项目中需要基于<a>
标签href属性来滚动页面。
由于我的项目是单页应用程序,因此ScrollTop功能无法正常工作。我可以使用窗口scrollTo(x坐标,y坐标) 功能来实现。
但现在问题是我想在页面中创建平滑滚动效果。
如何在scrollTo(x,y)函数中实现?
先行致谢。 :)
如果您想控制滚动的距离和速度,可以使用下面的函数:
/**
* A function to scroll a given amount of y pixels in a given time
*/
async function scrollByY(y, time) {
const start = performance.now()
const startY = window.scrollY
const endY = startY + y
while (performance.now() < start + time) {
const progress = (performance.now() - start) / time
window.scrollTo(0, startY + y * progress)
// wait for the next frame
await new Promise(requestAnimationFrame)
}
window.scrollTo(0, endY)
}
document.querySelector("#one").addEventListener("click", async () => {
await scrollByY(100, 500)
})
document.querySelector("#two").addEventListener("click", async () => {
await scrollByY(200, 2000)
})
<body style="margin: 0">
<div style="position: fixed">
<button id="one">scroll 100px in 0.5s</button>
<button id="two">scroll 200px in 2s</button>
</div>
<div style="background: yellowgreen; height: 100px"></div>
<div style="background: orange; height: 100px"></div>
<div style="background: darkgoldenrod; height: 100px"></div>
<div style="background: darkolivegreen; height: 100px"></div>
<div style="background: blueviolet; height: 100vh"></div>
</body>
在2018年,您现在可以使用新的API原生地(即使用原始JavaScript)实现平滑滚动,包括:
Element.scrollTo({ScrollingOptionsObject})
Element.scrollBy({ScrollingOptionsObject})
Element.scrollIntoView({ScrollingOptionsObject})
浏览器支持:
使用原生JavaScript实现平滑滚动的工作示例:
var pageLinks = [... document.querySelectorAll('li button')];
function scrollToSection(e) {
var targetSection = document.getElementById(e.target.dataset.targetSection);
targetSection.scrollIntoView({behavior: 'smooth'});
}
for (let i = 0; i < pageLinks.length; i++) {
pageLinks[i].addEventListener('click', scrollToSection, false);
}
ul {
margin-bottom: 480px;
}
button {
color: rgb(0,0, 239);
text-decoration: underline;
background: none;
border: none;
cursor: pointer;
}
section {
display: block;
width: 50%;
height: 300px;
margin: 12px 0 96px;
padding: 6px;
border: 1px solid rgb(127, 127, 127);
}
<ul>
<li><button type="button" data-target-section="section-1">Go to Section 1</button></li>
<li><button type="button" data-target-section="section-2">Go to Section 2</button></li>
<li><button type="button" data-target-section="section-3">Go to Section 3</button></li>
<li><button type="button" data-target-section="section-4">Go to Section 4</button></li>
<li><button type="button" data-target-section="section-5">Go to Section 5</button></li>
</ul>
<section id="section-1" class="section-1">
<h2>This is Section 1</h2>
</section>
<section id="section-2" class="section-2">
<h2>This is Section 2</h2>
</section>
<section id="section-3" class="section-3">
<h2>This is Section 3</h2>
</section>
<section id="section-4" class="section-4">
<h2>This is Section 4</h2>
</section>
<section id="section-5" class="section-5">
<h2>This is Section 5</h2>
</section>
如果您喜欢那个... 这里有一些真正令人兴奋的事情:
CSS值scroll-behaviour
的浏览器支持略微落后于以上javascript API的浏览器支持,但它的实现可以实现惊人的效果,例如:
body {scroll-behavior: smooth;}
CSS平滑滚动的工作示例:
:root {
scroll-behavior: smooth;
}
ul {
margin-bottom: 480px;
}
section {
display: block;
width: 50%;
height: 300px;
margin: 12px 0 96px;
padding: 6px;
border: 1px solid rgb(127, 127, 127);
}
<ul>
<li><a href="#section-1">Go to Section 1</a></li>
<li><a href="#section-2">Go to Section 2</a></li>
<li><a href="#section-3">Go to Section 3</a></li>
<li><a href="#section-4">Go to Section 4</a></li>
<li><a href="#section-5">Go to Section 5</a></li>
</ul>
<section id="section-1" class="section-1">
<h2>This is Section 1</h2>
</section>
<section id="section-2" class="section-2">
<h2>This is Section 2</h2>
</section>
<section id="section-3" class="section-3">
<h2>This is Section 3</h2>
</section>
<section id="section-4" class="section-4">
<h2>This is Section 4</h2>
</section>
<section id="section-5" class="section-5">
<h2>This is Section 5</h2>
</section>
{...behaviour: "smooth"}
更顺畅的解决方案。有没有办法真正控制滚动动画需要多少毫秒才能完成? - Arp.scrollIntoView()
有时会出现问题。请参见:https://github.com/iamdustan/smoothscroll/issues/28(这是一个平滑滚动的polyfill问题,但他们谈到了Chrome的行为和解决方法。) - Ouroborus