进一步了解新的Javascript平滑滚动API：

Question

我是js的新手。

我需要根据我的大学项目中的<a>标记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：

如果您喜欢那 ...这是真的令人兴奋的事情：

浏览器对CSS值scroll-behaviour的支持略低于上面对javascript API的浏览器支持-但是在实现该功能的地方，它可以做一些 令人惊叹 ，就像这样：

body {scroll-behavior: smooth;}

此处的浏览器支持：

https://caniuse.com/#search=scroll-behavior

CSS平滑滚动的工作示例：

body {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>

如何在window.scrollTo（x-coord，y-coord）中控制滚动速度;

1 个答案:

进一步了解新的Javascript平滑滚动API：