Code cuộn chuột trơn (Smooth Scrolling) giúp di chuyển mượt mà trong giao diện khi độc giả sử dụng, giúp tăng khả năng trải nghiệm điều hướng mặc định trong trang web.
Với hiệu ứng hoạt cảnh thay đổi vị trong hộp cuộn từ vị trí của liên kết kích hoạt với vị trí của các yếu tố đến chỉ ra trong đoạn đã định của các liên kết đến.
Có rất nhiều hiện thực của mô hình này trong các hệ sinh thái jQuery, hoặc sử dụng trực tiếp hoặc thực hiện với một plugin jQuery, nhưng trong bài viết này, chúng tôi quan tâm đến một giải pháp JavaScript tinh khiết. Cụ thể, chúng ta sẽ khám phá và tận dụng các Jump.js thư viện.
Sau một bài thuyết trình của thư viện, với một cái nhìn tổng quan về các tính năng và đặc điểm của nó, chúng tôi sẽ áp dụng một số thay đổi mã ban đầu để thích ứng với nhu cầu của chúng tôi. Để làm được điều này, chúng tôi sẽ làm mới một số kỹ năng cốt lõi ngôn ngữ JavaScript như chức năng và đóng cửa. Sau đó chúng tôi sẽ tạo ra một trang HTML để kiểm tra các hành vi di chuyển mượt mà nó sẽ được thực hiện sau đó như một kịch bản tùy chỉnh. Hỗ trợ, khi có sẵn, cho di chuyển mượt tự nhiên với CSS sau đó sẽ được thêm vào và cuối cùng chúng tôi sẽ kết thúc với một số quan sát liên quan đến việc chuyển hướng lịch sử trình duyệt.
Demo:
Ví dụ:
Chèn đoạn code sau trong thẻ <head>
Chèn đoạn code sau trong thẻ <body>
Tags:
Với hiệu ứng hoạt cảnh thay đổi vị trong hộp cuộn từ vị trí của liên kết kích hoạt với vị trí của các yếu tố đến chỉ ra trong đoạn đã định của các liên kết đến.
Có rất nhiều hiện thực của mô hình này trong các hệ sinh thái jQuery, hoặc sử dụng trực tiếp hoặc thực hiện với một plugin jQuery, nhưng trong bài viết này, chúng tôi quan tâm đến một giải pháp JavaScript tinh khiết. Cụ thể, chúng ta sẽ khám phá và tận dụng các Jump.js thư viện.
Sau một bài thuyết trình của thư viện, với một cái nhìn tổng quan về các tính năng và đặc điểm của nó, chúng tôi sẽ áp dụng một số thay đổi mã ban đầu để thích ứng với nhu cầu của chúng tôi. Để làm được điều này, chúng tôi sẽ làm mới một số kỹ năng cốt lõi ngôn ngữ JavaScript như chức năng và đóng cửa. Sau đó chúng tôi sẽ tạo ra một trang HTML để kiểm tra các hành vi di chuyển mượt mà nó sẽ được thực hiện sau đó như một kịch bản tùy chỉnh. Hỗ trợ, khi có sẵn, cho di chuyển mượt tự nhiên với CSS sau đó sẽ được thêm vào và cuối cùng chúng tôi sẽ kết thúc với một số quan sát liên quan đến việc chuyển hướng lịch sử trình duyệt.
Demo:
Chèn đoạn code sau trong thẻ <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
//]]>
</script>
Chèn đoạn code sau trong thẻ <body>
<div id="page-wrap">
<h1 id="top111">Smooth Page Scrolling</h1>
<ul>
<li><a href="#two111">Scroll to Section Two</a></li>
<li><a href="#three111">Scroll to Section Three</a></li>
</ul>
<h2 id="one111">Section One</h2>
<p>đoạn text</p>
<h2 id="two111">Section Two</h2>
<p><a href="#top111">Top</a></p>
<p>đoạn text</p>
<h2 id="three111">Section Three</h2>
<p><a href="#top111">Top</a></p>
<p>đoạn text</p>
</div>
Bài viết chỉ mang tính chất tham khảo và học hỏi / trích nguồn từ: https://www.sitepoint.com/smooth-scrolling-vanilla-javascript/
Không có nhận xét nào: