Hiệu ứng trượt mượt mà (Smooth scroll) chỉ dùng Javascript

Updated on May 11, 2019 - Post a Comment

Hiệu ứng trượt mượt mà (Smooth scroll) khi lăn chuột giúp tăng trải nghiệm người dùng, mình sẽ giới thiệu cách tạo hiệu ứng này chỉ với Javascript

Smooth scroll theo một hướng

Preview

Đơn giản bạn chỉ cần đặt đoạn script phía dưới lên trước thẻ <body>

<script type="text/javascript">
function anchorLinkHandler(e) {
    const distanceToTop = el => Math.floor(el.getBoundingClientRect().top);

    e.preventDefault();
    const targetID = this.getAttribute("href");
    const targetAnchor = document.querySelector(targetID);
    if (!targetAnchor) return;
    const originalTop = distanceToTop(targetAnchor);

    window.scrollBy({ top: originalTop, left: 0, behavior: "smooth" });

    const checkIfDone = setInterval(function() {
        const atBottom = window.innerHeight + window.pageYOffset >= document.body.offsetHeight - 2;
        if (distanceToTop(targetAnchor) === 0 || atBottom) {
            targetAnchor.tabIndex = "-1";
            targetAnchor.focus();
            window.history.pushState("", "", targetID);
            clearInterval(checkIfDone);
        }
    }, 100);
}

const linksToAnchors = document.querySelectorAll('a[href^="#"]');

linksToAnchors.forEach(each => (each.onclick = anchorLinkHandler));

// it could probably work in two dimensions too... that'd be kinda cool.
</script>

Smooth scroll theo nhiều hướng

Preview

Đặt đoạn script phía dưới lên trước thẻ <body>

<script type='text/javascript'>
function anchorLinkHandler(e) {
    e.preventDefault();
    const targetID = this.href.slice(this.href.indexOf("#"));
    const element = document.querySelector(targetID);
    const originalTop = element.getBoundingClientRect().top;
    const originalLeft = element.getBoundingClientRect().left;

    window.scrollBy({
        top: originalTop,
        left: originalLeft,
        behavior: "smooth"
    });

    const checkIfDone = setInterval(function() {
        currentTop = element.getBoundingClientRect().top;
        currentLeft = element.getBoundingClientRect().left;
        if (Math.floor(currentTop) === 0 && Math.floor(currentLeft) === 0) {
            element.tabIndex = "-1";
            element.focus();
            clearInterval(checkIfDone);
        }
    }, 100);
}

const linksToAnchors = document.querySelectorAll('a[href^="#"]');

linksToAnchors.forEach(each => (each.onclick = anchorLinkHandler));

// it could probably work in two dimensions too... that'd be kinda cool.

</script>