Init HTML

Ví dụ

• Promo
• Meson
• Shefa

HTML

Đặt ID vào các section chính, liên kết có định dạng href="#ID".

<a href="#id-1"></a>
<a href="#id-2"></a>
<a href="#id-3"></a>

<section id="id-1"></section>
<section id="id-2"></section>
<section id="id-3"></section>

Bạn có thể xem ví dụ rõ hơn ở trang Workout mình từng giới thiệu.

Tới trang Workout

jQuery

Thêm đoạn mã jQuery này ở cuối trang, hoặc ở cuối cùng của tập tin .js, ngoài sự kiện ready.

$(function() {
    $('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
                }, 700);
                return false;
            }
        }
    });
});

Với 700 là tốc độ trượt, tính bằng mili giây.

Trượt khi có sự kiện

Bạn có thể tùy chỉnh đoạn mã trên để trang web trượt đến đúng nơi khi có sự kiện, ví dụ sự kiện click:

$('#id-1').click(function() {
    $('html, body').animate({
        scrollTop: $('#id-2').offset().top
    }, 700);
    return false;
});

Chúc các bạn thành công!