如何在jQuery中创建滚动到顶部动画
时间：2020-02-23 14:46:00 来源:igfitidea点击:
提供良好的用户体验是Web设计人员的首要任务。
您可能访问了具有许多可滚动页面的网页，而回到此类网页的顶部对于用户来说是一项繁琐的任务。
如果您想提供良好的用户体验，则可以将滚动条添加到网页的顶部按钮。
在本文中，我们将讨论如何在jQuery中创建滚动到顶部的动画，该动画将允许用户单击一下即可轻松滚动到页面的顶部。
建议您先阅读以下教程，然后再继续进行本教程。
- jQuery滚动事件
- jQuery淡入和淡出效果
- jQuery animate()
您可以使用以下代码来实现带有动画的滚动到顶部功能。
<!doctype html>
<html>
<head>
<title>jQuery Scroll To Top</title>
<style>
.scroll_To_Top{
width:150px;
height:100px;
color: black;
text-decoration: none;
position:fixed;
padding:10px;
text-align:center;
background: white;
font-weight: bold;
top:100px;
right:50px;
display:none;
}
.scroll_To_Top:hover{
text-decoration:none;
color:green;
}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script>
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100)
{
$('.scroll_To_Top').fadeIn();
}
else
{
$('.scroll_To_Top').fadeOut();
}
});
$('.scroll_To_Top').click(function(){
$('html, body').animate({scrollTop : 0},700);
return false;
});
});
</script>
</head>
<body>
<div>
<h2 class="textHeader">jQuery Scroll To Top Demo</h2>
<!-- Your contents goes here. -->
<p>
<a href="#" class="scroll_To_Top">Scroll To Top <!-- Image goes here. --></a>
</p>
</div>
</body>
</html>
在此示例中，您可以看到我们如何在jQuery中创建滚动到顶部动画的方式。
我们使用了jQueryscroll()，animate()，fadeIn()和fadeOut()函数来使滚动到顶部的动画技术动起来。
首先，我们在" body"中添加以下html链接，该链接用作我们网页中的滚动到顶部的链接。
<a href="#" class="scroll_To_Top">Scroll To Top <!-- Image goes here. --></a>
您可以将图像附加到此链接以使其更具吸引力。
我们添加了CSS类以使滚动到顶部的链接动起来。
首先，我们没有显示此链接。
以下脚本显示了滚动到顶部动画在jQuery中的工作方式。
<script>
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100){
$('.scrollToTop').fadeIn();
}
else{
$('.scrollToTop').fadeOut();
}
});
$('.scrollToTop').click(function(){
$("html, body").animate({scrollTop : 0},700);
return false;
});
});
</script>
jQuery scroll()方法在窗口滚动时触发。
当滚动事件被触发或者向下滚动时，我们检查滚动条的当前位置是否大于100，然后显示滚动到顶部，否则链接将被隐藏。
我们使用jQuery fadeIn()和fadeOut()方法对此进行动画处理。
$(" html，body").animate({scrollTop：0}，700);：单击链接将触发animate()方法，该方法具有参数，scrollTop和此效果的持续时间(700毫秒) 。
scrollTop()方法用于获取滚动条的当前位置，整数值0是单击链接时到达的位置。
我们将效果的持续时间设置为700毫秒。
您可以增加或者减少此值以改变动画的速度。
