javascript - 如何在 window.scrollTo(x-coord, y-coord); 中控制滚动速度；

Question

我是js新手。

我需要根据 <a> 滚动页面我的大学项目中的 tag href 属性。

ScrollTop 功能不起作用，因为我的项目是单页应用程序。我可以使用 window.scrollTo(x-coord, y-coord); 的功能来实现这一点。

但现在的问题是我想在我的页面中制作平滑的滚动效果。

如何在scrollTo(x,y)函数中实现它？？？

提前致谢。 :)

Answer 1

在 2018 年，您现在可以使用新的 API 本地实现平滑滚动(即在普通 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 的支持 - 但在实现它的地方它可以做一些令人惊奇的，如下所示:

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>