如何在jQuery中创建滚动到顶部动画

邴俊友

2023-12-01

Providing a good user experience is the primary concern of a web designer. You may have visited web pages with many scrollable pages and going back to top of such web pages is a tedious task for the users. You can add a scroll to top button to your web page, if you want to offer a good user experience.

提供良好的用户体验是Web设计人员的首要任务。您可能访问了具有许多可滚动页面的网页，而回到此类网页的顶部对于用户来说是一项繁琐的任务。如果您想提供良好的用户体验，则可以向页面的顶部按钮添加滚动条。

In this post, we are going to discuss how to create a scroll to top animation in jQuery that will allow the users to easily scroll to top of the page with a single click.

在本文中，我们将讨论如何在jQuery中创建滚动到顶部的动画，该动画将允许用户单击一下即可轻松滚动到页面的顶部。

I recommend you to go through the following tutorials before proceeding to this one.

我建议您在继续阅读本教程之前，先阅读以下教程。

You can use the following code to implement the scroll to top functionality with animation.

您可以使用以下代码来实现带有动画的滚动到顶部功能 。

<!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 <span><!-- Image goes here. --></span></a>
			</p>
		</div>
	</body>

</html>

In this example, you can see how we created a scroll to top animation in jQuery. We have used jQuery scroll(), animate(), fadeIn() and fadeOut() function to animate the scroll to top animation technique.

在此示例中，您可以看到我们如何在jQuery中创建到顶部动画的滚动。我们使用了jQuery scroll() ， animate() ， fadeIn()和fadeOut()函数来使滚动到顶部的动画技术动起来。

First we add the following html link in the body that works as the scroll to top link in our web page.

首先，我们在body中添加以下html链接，该链接用作我们网页中滚动到顶部的链接。

<a href="#" class="scroll_To_Top">Scroll To Top <span><!-- Image goes here. --></span></a>

You can attach an image to this link to make it attractive. We have added CSS classes to animate the scroll to top link. At first, we are not showing this link.

您可以将图像附加到此链接以使其更具吸引力。我们添加了CSS类以使滚动到顶部的链接动起来。首先，我们没有显示此链接。

The following script shows how scroll to top animations works in jQuery.

以下脚本显示了滚动到顶部动画在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() method triggers when the window is scrolled . When the scroll event is fired or when we scroll down, we check if the current position of the scroll bar is greater than 100 then scroll to top is displayed else the link will be hidden. We animate this with jQuery fadeIn() and fadeOut() methods.

jQuery scroll（）方法在窗口滚动时触发。当滚动事件被触发或向下滚动时，我们检查滚动条的当前位置是否大于100，然后显示滚动到顶部，否则链接将被隐藏。我们使用jQuery fadeIn（）和fadeOut（）方法对此进行动画处理。

$("html, body").animate({scrollTop : 0},700); : Clicking the link will trigger the animate() method,which takes the parameters, scrollTop and the duration of this effect (700 milliSeconds).The scrollTop() method is used to get the current position of the scroll bar and the integer value 0 is the position where you reach on clicking the link. We set the duration of the effect as 700 milliSeconds. You can increase or decrease this value to vary the speed of the animation.

$("html, body").animate({scrollTop : 0},700); ：单击链接将触发animate（）方法，该方法带有参数，scrollTop和该效果的持续时间（700毫秒）。scrollTop （）方法用于获取滚动条的当前位置和整数值0是您点击链接到达的位置。我们将效果的持续时间设置为700毫秒。您可以增加或减少此值以改变动画的速度。

This is how we implement scroll to top animation in jQuery. Hope you all understood the technique. You can see it in action by visiting jQuery Scroll To Top Demo page.

这就是我们在jQuery中实现滚动到顶部动画的方式。希望大家都了解该技术。您可以通过访问jQuery Scroll To Top Demo页面来查看它的运行情况。

That’s all for now and you will see more jQuery effects, animations and jQuery plugins related articles in the coming posts.

到此为止，您将在接下来的文章中看到更多有关jQuery效果，动画和jQuery插件的文章。

翻译自: https://www.journaldev.com/5446/how-to-create-scroll-to-top-animation-in-jquery

如何在jQuery中创建滚动到顶部动画

相关阅读

相关文章

相关问答

相关文档