纯js实现回到锚点

最新推荐文章于 2022-08-10 17:28:22 发布

admini1234

最新推荐文章于 2022-08-10 17:28:22 发布

阅读量278

点赞数

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

版权

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

摘要由CSDN通过智能技术生成

 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;
                })();
            })();
        }