Hiệu ứng trượt mượt mà cho website
Chào các bạn, hôm nay mình quyết định viết một bài chia sẻ một đoạn js mà mình có sưu tầm được về thủ thuật này trên mạng internet.
Với hiệu ứng này, website của bạn sẽ trở nên mượt mà hơn mỗi khi di chuyển lên xuống cũng như giúp người dùng có trải nghiệm tốt hơn khi đọc tin tức trren website bạn, website của bạn sẽ trông chuyên nghiệp hơn rất nhiều đấy. Hiện nay các trình duyệt cũng đã có tiện ích để làm cho blog/website bạn mượt mà như vậy.
Nếu bạn dùng WordPress thì có thể dùng Plugin này https://wordpress.org/plugins/jquery-smooth-scroll/, còn nếu không thích bạn co thể dùng mã javascript bên dưới đây
$(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
});
});
tập tin bao gồm css, html và js bạn chỉ việc tao một tên bất kỳ, giả sử tôi tạo nó với tên là demo.html
<!DOCTYPE html>
<html>
<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
});
});
</script>
<style>
body, html, .main {
height: 100%;
}
section {
min-height: 100%;
}
</style>
</head>
<body>
<a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>
<div class="main">
<section></section>
</div>
<div class="main" id="section2">
<section style="background-color:blue"></section>
</div>
</body>
</html>
sau đó bạn lưu lại và mở nó bằng trình duyệt chrome hay firefox để xem kết quả
Kết luận
Thủ thuật nhỏ này rất hữu ích cho website của bạn, thật ra tôi cũng đã áp dụng nó vào trang web Lackky bạn có thể xem demo tại đây
