Hiệu ứng cho scrolling

Hiệu ứng cho scrolling

Hiệu ứng scrolling là khi người dùng click vào một mục nào đó phía trên của website thì sẽ nhảy tới mục chứa nội dung nào đó có sẵn trong trang nhưng ở phía dưới, khi không hiệu ứng ta click nó sẽ nhảy ra ngay lập tức và như thế trông sẽ không mượt mà cho lắm. Hôm nay mình sẽ giới thiệu các để có được hiệu ứng trượt scrolling mượt mà cho trang web cách đơn giản nhất chỉ với Jquery.

 

Html: Thẻ <a> với href là id của phần tử cần link tới.

Thẻ <div> với id giống với href của thẻ link <a>.

Jquery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

Code: 

900 là thời gian có thể tùy chỉnh chó phù hợp.

 

$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();

var target = this.hash;
var $target = $(target);

$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});

 

Demo: View demo

Chúc bạn thành công.

 

Print

---