jQuery: Tạo hiệu ứng Scroll Jump bằng jQuery
Dưới đây V1Study trình bày một cách tạo hiệu ứng Scroll Jump bằng jQuery (Animate the Jump using jQuery). Các bạn có thể nhấn nút "Demo" để xem kết quả và lấy code của ví dụ. Bạn cũng có thể xem ví dụ áp dụng tại bài viết: Khóa học Lập trình web chuyên nghiệp với PHP.
<!DOCTYPE html>
<html>
<head>
<title>V1Study: Tạo hiệu ứng Jump bằng jQuery (Animate the Jump using jQuery)</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function() {
$(".jumper").on("click", function() {
$("body, html").animate({
scrollTop: $($(this).attr('href')).offset().top
}, 600);
});
});
</script>
</head>
<body>
<a class="jumper" href="#v1study1">Heading 1</a>
<a class="jumper" href="#v1study2">Heading 2</a>
<h2 id="v1study1">Heading 1</h2>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<h2 id="v1study2">Heading 2</h2>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
</body>
</html>