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

April 21, 2018 May 18, 2018
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>

Tags: #Smooth Scrol, #trượt, #Javascript,
Click to show more

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

Ads Above Article

Ads Inside Article 1

Ads Inside Article 2

Ads Bellow Article