Trượt tới ID trên Landing Page

21/04/2017 0 7 2 phút đọc

Bài viết này giới thiệu đoạn jQuery trượt (scroll) tới ID. Các bạn có thể áp dụng để hiệu ứng trượt Landing Page trên của mình được mượt hơn.

Trượt tới ID trên Landing Page
Mục lục

Ví dụ

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!

Series: Thủ thuật Front-end

Bài Viết Liên Quan

Bình Luận

  • Không có bình luận.