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

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

Updated on May 11, 2019
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


Đơ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


Đặ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>

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

Cancel