jQuery animate scrolltop cũng như phương thức jQuery scroll() được kích hoạt khi cửa sổ được cuộn. animate() là một chuỗi đặt tên cho một hàm dễ dàng sử dụng.
jQuery animate scrolltop
Nội dung
Plugin hiệu ứng cuộn tốt nhất của jQuery với ví dụ. Thuộc tính scrollTop trong js được sử dụng để đặt hoặc trả về vị trí thanh cuộn dọc của bất kỳ phần tử nào.
$("html, body").animate({ scrollTop: scrollPosition });
Cách tạo hiệu ứng cuộn lên đầu bằng 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>
Cách tạo hiệu ứng Cuộn lên Đầu bằng 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>
Cách tạo hiệu ứng cuộn bằng jQuery?
Ví dụ về Cuộn Lên Đầu bằng jQuery: Thực hiện Cuộn Lên Đầu bằng jQuery với Hiệu ứng
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>
Hy vọng bạn đã hiểu về jquery animate scrolltop.
- Bài viết blog này ban đầu được xuất bản tại: https://www.pakainfo.com
