我是JS的新手。
我需要根据我的大学项目中的<a>标签HREF属性来滚动页面。
我的项目是一个页面应用程序，因此Scrolltop功能无法正常工作。我可以通过window.scrollto（x-Coord，y-coord）;。
来实现该功能。，但是现在问题是我想在我的页面上产生平滑的卷轴效果。
如何在scollto（x，y）函数中实现它？
预先感谢。:)
距离＆amp;速度
如果要控制到滚动的距离和速度，则可以使用以下功能：
/**
* 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来实现 spooth scrolling 本地（即vanilla javaScript），以：
-
Element.scrollTo({ScrollingOptionsObject}) -
Element.scrollBy({ScrollingOptionsObject}) -
Element.scrollIntoView({ScrollingOptionsObject})
浏览器支持：
- https://caniuse.com/#feat=scrollintoview
Vanilla 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>进一步阅读有关新的JavaScript光滑滚动API的信息：
- https://developer.mozilla.org/en-us/docs/web/api/window/scrollto
- https://developer.mozilla.org/en-us/docs/web/api/window/scrollby
- https://developer.mozilla.org/en-us/docs/web/api/element/scrollintoview
，如果您喜欢 ...这是真正令人兴奋的东西：
浏览器对CSS值scroll-behaviour的支持略有稍微落后于上面的JavaScript API的浏览器支持 - 但是在实现的地方，它可以做一些 Amazing ，：
body {scroll-behavior: smooth;}
浏览器支持：
- https://caniuse.com/#search=scroll-behavior
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>