jquery animate scrolltop – How to animate scrollTop using jQuery ?

jquery animate scrolltop as well as jQuery scroll() method triggers when the window is scrolled. animate() is a string naming an easing function to use.

jquery animate scrolltop

Best jQuery scroll effect animation plugin with example. The scrollTop property in js is used to set or return the vertical scrollbar position of any element.

$("html, body").animate({ scrollTop: scrollPosition });

How to animate scrollTop using jQuery ?

index.html

<!DOCTYPE html>
<html>

<head>
	<title>
		How to animate scrollTop with jQuery? - www.pakainfo.com
	</title>
	
	<script src=
		"https://code.jquery.com/jquery-3.4.1.min.js">
	</script>
	
	<style>
		.scrollable {
			background-color: green;
			height: 1000px;
		}
	</style>
</head>

<body>
	<h1 style="color: green">
		Pakainfo
	</h1>
	
	<b>
		How to animate scrollTop with jQuery?
	</b>
	
	
	<p class="scrollable">
		Welcome TO Pakainfo.com free download source code.
	</p>
	
	<button onclick="scrollTopAnimated()">
		Scroll To Top
	</button>
	
	<script type="text/javascript">
		function scrollTopAnimated() {
			$("html, body").animate({ scrollTop: "0" });
		}
	</script>
</body>

</html>

How to create Scroll to Top animation in jQuery?

index.html

<!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>

Free Live Chat for Any Issue

How to animate scroll in jQuery?

jQuery ScrollTop Animate example: Implement jQuery ScrollTop with Animation

Also Read This πŸ‘‰   Double click jquery

index.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        #scrollToTop
        {
             cursor:pointer;
             background-color:#0090CB;
             display:inline-block;
             height:40px;
             width:40px;
             color:#fff;
             font-size:16pt;
             text-align:center;
             text-decoration:none;
             line-height:40px;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type = "text/javascript">
        $(function () {
            $('#scrollToTop').bind("click", function () {
                $('html, body').animate({ scrollTop: 0 }, 1200);
                return false;
            });
        });
    </script>
</head>
<body>

jQuery scroll to element<br />jQuery scroll to element<br />jQuery scroll to element<br />jQuery scroll to element<br />
jQuery scroll to element<br />jQuery scroll to element<br />jQuery scroll to element<br />jQuery scroll to element<br />
jQuery scroll to element<br />jQuery scroll to element<br />jQuery scroll to element<br />jQuery scroll to element<br />
jQuery scroll to element<br />jQuery scroll to element<br />jQuery scroll to element<br />jQuery scroll to element<br />
jQuery scroll to element<br />jQuery scroll to element<br />jQuery scroll to element<br />jQuery scroll to element<br />
jQuery scroll to element<br />jQuery scroll to element<br />jQuery scroll to element<br />jQuery scroll to element<br />
jQuery scroll to element<br />jQuery scroll to element<br />jQuery scroll to element<br />jQuery scroll to element<br />
jQuery scroll to element<br />jQuery scroll to element<br />jQuery scroll to element<br />jQuery scroll to element<br />
jQuery scroll to element<br />jQuery scroll to element<br />jQuery scroll to element<br />jQuery scroll to element<br />
jQuery scroll to element<br />jQuery scroll to element<br />jQuery scroll to element<br />jQuery scroll to element<br />
jQuery scroll to element<br />jQuery scroll to element<br />jQuery scroll to element<br />jQuery scroll to element<br />
jQuery scroll to element<br />jQuery scroll to element<br />jQuery scroll to element<br />jQuery scroll to element<br />
jQuery scroll to element<br />jQuery scroll to element<br />jQuery scroll to element<br />jQuery scroll to element<br />
jQuery scroll to element<br />jQuery scroll to element<br />jQuery scroll to element<br />jQuery scroll to element<br />
<div align = "right">
<a href="javascript:;" id="scrollToTop">▲</a>
</div>
</body>
</html>

jQuery scroll to element

I hope you get an idea about jquery animate scrolltop.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Rate this post