纯js实现回到锚点

最新推荐文章于 2025-05-07 13:46:24 发布

转载最新推荐文章于 2025-05-07 13:46:24 发布 · 306 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/prolion/p/8442497.html

本文介绍了一种使用JavaScript实现的平滑滚动效果，当URL包含特定锚点时，页面会以动画形式滚动到该元素位置。通过requestAnimationFrame或setTimeout实现，确保了滚动的流畅性和用户体验。

 window.requestAnimationFrame = window.requestAnimationFrame || function (fn) {
            return setTimeout(fn, 1000 / 60);
        };
        var target = document.getElementById("plist").offsetTop;
        if (location.href.indexOf('#plist') > 0 && parseInt(target) > 0) {
            (function animation() {
                var init = 0;
                (function fn() {
                    init += 40;
                    if (init >= target) {
                        init = target;
                    } else {
                        requestAnimationFrame(fn);
                    }
                    document.body.scrollTop = document.documentElement.scrollTop = init;
                })();
            })();
        }