vanilla
在这个新教程中,我们将学习如何在网页中实现平滑滚动。 我们将从创建该功能的通用jQuery方法开始。 然后,我们将摆脱jQuery,并讨论两个纯JavaScript解决方案。
只是为了让您了解我们将在本教程中讨论的内容,请查看我们将要构建的一个演示:
让我们开始吧!
1.从HTML标记开始
为了演示起见,我们将定义一个包装在容器中的标头和四个部分。 在标题内,我们将指定一个导航菜单和一个介绍性文本。
每个部分都有一个id
其值与菜单链接的href
值匹配。 这种关联(我们称为片段标识符 )将使我们跳到页面的特定部分。
这是HTML:
<div class="container">
...
<header class="page-header">
<nav>
<ul>
<li>
<a href="#...">...</a>
</li>
<!-- more links -->
</ul>
</nav>
<div class="header-text">...</div>
</header>
</div>
<section class="section" id="">...</section>
<section class="section" id="">...</section>
<section class="section" id="">...</section>
<section class="section" id="">...</section>
2.定义样式
CSS部分将非常简单明了,没什么特别的。
首先,我们将使用CSS Grid来布局页面标题。 菜单将覆盖可用宽度的四分之一,而文本则占剩余的四分之三(响应式内容在这里并不是很重要):
.page-header {
display: grid;
grid-column-gap: 30px;
grid-template-columns: 1fr 3fr;
padding: 40px 0;
border-top: 1px solid;
border-bottom: 1px solid;
margin-bottom: 150px;
}
.header-text {
font-weight: bold;
}
接下来,我们将为这些部分应用一些样式。 最重要的是,我们将确保它们足够高,因此在页面内有足够的滚动效果:
/*CUSTOM VARIABLES HERE*/
.section {
padding: 150px 0;
}
.section:nth-of-type(1),
.section:nth-of-type(3) {
background: var(--beige);
}
.section-text {
margin: 50px 0;
max-width: 800px;
}
.section-btn {
display: inline-block;
color: var(--beige);
background: var(--black);
min-width: 200px;
height: 50px;
padding: 9px 40px;
text-align: center;
}
到目前为止,这就是我们所需要的! 如果现在单击特定链接,我们将立即跳至相关页面部分。
查看我们的初始演示:
基本HTML内容,对不对? 现在让我们更进一步,学习如何平稳地导航到各个部分。
3.使用jQuery平滑滚动
我们将从流行的jQuery方法开始。 为了使用jQuery创建平滑滚动,我们将利用其animate()
方法。
每次单击导航链接时,我们都会做以下事情:
- 取消其默认行为即可跳转到相应的部分。
- 获取其
href
属性值。 - 通过设置
scrollTop
属性的动画来平滑导航到关联的部分。 请注意,animate()
方法允许我们调整动画速度。 在我们的情况下,动画将持续800毫秒。
这是jQuery代码:
$(".page-header ul a").on("click", function (e) {
// 1
e.preventDefault();
// 2
const href = $(this).attr("href");
// 3
$("html, body").animate({ scrollTop: $(href).offset().top }, 800);
});
和相关的演示:
4.使用Vanilla JavaScript平滑滚动
在这一点上,我们将抛弃jQuery,而专注于本机JavaScript解决方案。 令人高兴的是,它比您预期的要简单得多。
正如我们将在后面的部分中看到的那样,即使浏览器支持不是理想的,我们也可以采取一些措施来克服此限制。
使用scroll()
方法
首先,我们将使用scroll()
方法。 这种方法的逻辑类似于以前的jQuery实现。
这里的窍门是,在此方法内部,我们将通过behavior
配置属性确定滚动行为。 可能的值是auto
(默认)和smooth
。 只要将其值设置为smooth
,魔术就会发生,并且我们将能够顺利导航到目标部分。
值得一提的是,在撰写本文时, 规范中没有定义任何用于控制动画速度的speed
选项。 如果这不能满足您的需求,则可能必须通过编写自定义代码来扩展本机功能。
这是必需的代码:
const links = document.querySelectorAll(".page-header ul a");
for (const link of links) {
link.addEventListener("click", clickHandler);
}
function clickHandler(e) {
e.preventDefault();
const href = this.getAttribute("href");
const offsetTop = document.querySelector(href).offsetTop;
scroll({
top: offsetTop,
behavior: "smooth"
});
}
提示:如果不的的scroll()
方法中,我们同样可以使用了scrollTo()
和scrollBy()
方法。 效果应相同。
这是相关的演示:
使用scrollIntoView()
方法
除了上述附加到window
对象的scroll方法之外,还有适用于DOM元素的scrollIntoView()
方法。 这也可以接受behavior
属性并将其值设置为smooth
。
这是此实现所需的代码:
const links = document.querySelectorAll(".page-header ul a");
for (const link of links) {
link.addEventListener("click", clickHandler);
}
function clickHandler(e) {
e.preventDefault();
const href = this.getAttribute("href");
document.querySelector(href).scrollIntoView({
behavior: "smooth"
});
}
相关演示:
保鲜膜好吗?
原生平滑滚动很棒,但是和许多其他新CSS好东西一样,它缺乏广泛的支持 。 如果对浏览器的支持对您很重要,则可以查看Dustan Kasten开发的Smooth Scroll polyfill。
要将其包含在您的项目中,请从CDN中获取它,然后将其作为script
标签插入到JavaScript代码之前。
这是我们上面提到的嵌入了polyfillJavaScript演示之一:
例如,使用此polyfill,浏览器(如Microsoft Edge 18)和iPad Mini 4等设备中的动画应能按预期工作。
结论
就是这样,伙计们! 今天,我们介绍了一个JavaScript技巧,该技巧可以帮助我们在不使用任何外部库的情况下实现平滑滚动。
我希望您觉得本练习有用,并且可以增强您JavaScript知识。 如果您过去曾经构建过类似的东西,请在下面的评论中与我们分享!
挑战 :在结束之前,我为您带来一个小挑战! 您的工作是通过添加“返回页首”按钮来扩展我们JavaScript演示之一。 最终功能应类似于此演示 。 您接受挑战吗? 如果是这样,我很高兴在下面的评论中看到您的解决方案!
与往常一样,非常感谢您的阅读!
翻译自: https://webdesign.tutsplus.com/tutorials/smooth-scrolling-vanilla-javascript--cms-35165
vanilla