原生js 实现屏幕滚到到指定元素所在位置

哎 好久没有更新过了 这次国庆属实放纵了 一下自己 但是学习还是要学的

今天来讲一个 小知识哈 滚动到指定的元素所在位置 当然 你也可以使用 jquery 来实现 jquery 就三行代码就ok乐

// 其实这里要用到一个 知识 e.offsetTop 元素到顶部的距离

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> //返回顶部 $('#goTop').click(function () { $('html body').stop().animate({ scrollTop: **这里写 元素距离顶部的距离** }, 1500); });

但今天 我们要讲解的是 原生js 用原生js 实现 好像有点高大上样子 但是 能用jquery 的话 还是用jquery 如果用不了的话 可以考虑原生哈

requestAnimationFrame（） 这个动画 其实是建议了解学习的 因为浏览器的刷新频率是 60 这样每次来实现动画帧的 移动 让用户看起来能无缝衔接 里面传进入一个函数 通过递归来实现的

function sTop() { // 这个是 滚动的高度 var scrollTop = document.documentElement.scrollTop; // 可视化高度 (窗口高度) var innerHeight = window.innerHeight; // 网页总高度 var scrollHeight = document.documentElement.scrollHeight; // 这个判断条件是 往上滚动还是往下滚动的 if (index > this.index 判断当前元素 和 要滚动到的元素 位置比较 (提示可以通过两者的下标 进行比较哈)) { // 滚动截止 条件 if (scrollTop < title[index].offsetTop && (scrollTop + innerHeight) < scrollHeight) { document.documentElement.scrollTop += 20; // 下滚 timer = requestAnimationFrame(sTop); // 再次调用 } else { cancelAnimationFrame(timer); } } else { // 滚动截止 条件 if (top > title[index].offsetTop || (top + innerHeight) >= scrollTop) { document.documentElement.scrollTop -= 20; // 上滚 timer = requestAnimationFrame(sTop); // 再次调用 } else { cancelAnimationFrame(timer); } } } timer = requestAnimationFrame(sTop);