Question

我在尝试使用vanilla JavaScript顺利滚动到元素时遇到了一些问题。

我有一个有3个链接的单页网站。当我单击其中一个链接时，我希望平滑滚动到它所代表的部分。我有一个jQuery版本，这很好用，但我想学习如何使用vanilla JavaScript实现相同的结果。

以前曾问过这个问题，但答案有点复杂。我相信应该有一个更清晰，更容易的答案。

感谢。

jQuery代码：

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 1000);
    return false;
});

Answer 1

你需要一些缓和功能来平滑的vanilla js滚动。

Robert Penner是放松的人

我有一段demo on jsbin我前段时间做过HTML5课程。您可能对这些来源感兴趣。

上面示例中使用的滚动演示函数：

function scrollToItemId(containerId, srollToId) {

        var scrollContainer = document.getElementById(containerId);
        var item = document.getElementById(scrollToId);

        //with animation
        var from = scrollContainer.scrollTop;
        var by = item.offsetTop - scrollContainer.scrollTop;
        if (from < item.offsetTop) {
            if (item.offsetTop > scrollContainer.scrollHeight - scrollContainer.clientHeight) {
                by = (scrollContainer.scrollHeight - scrollContainer.clientHeight) - scrollContainer.scrollTop;
            }
        }

        var currentIteration = 0;

        /**
         * get total iterations
         * 60 -> requestAnimationFrame 60/second
         * second parameter -> time in seconds for the animation
         **/
        var animIterations = Math.round(60 * 0.5); 

        (function scroll() {
            var value = easeOutCubic(currentIteration, from, by, animIterations);
            scrollContainer.scrollTop = value;
            currentIteration++;
            if (currentIteration < animIterations) {
                requestAnimationFrame(scroll);
            }    
        })();

        //without animation
        //scrollContainer.scrollTop = item.offsetTop;

    }

    //example easing functions
    function linearEase(currentIteration, startValue, changeInValue, totalIterations) {
        return changeInValue * currentIteration / totalIterations + startValue;
    }
    function easeOutCubic(currentIteration, startValue, changeInValue, totalIterations) {
        return changeInValue * (Math.pow(currentIteration / totalIterations - 1, 3) + 1) + startValue;
    }

使用vanilla JavaScript平滑地滚动到元素

1 个答案: