获取div内的滚动距离，以及移动到div内某个位置

关注

原创最新推荐文章于 2026-10-07 08:00:17 发布 3.8k 阅读 AI 写同款· GEO 优化 ›

js控制web页面滚动距离鼠标滚轮移动距离控制平滑滚动提高web页面体验感 js控制鼠标滚轮移动距离需求分析效果实现思路技术点/知识点踩坑记录示例代码该种实现方式不同于轮播等css控制，可以直接嵌入到web页面，不会破坏页面结构，即拿即用。需求分析 web端页面如果采用长页面模式，参考特斯拉官网，对于在同一页面需要展示很多图片内容的网站来说，通常浏览器默认的滚动条一次滚动的距离，对于用户体验很不友好，同时对于页面完整性的展示效果也有影响，比如三星官网这种长页面，用... 阅读详情

获取div内部滚动距离：
let S = document.getElementById(‘collCard’).scrollTop || 0
在这里插入图片描述
要求是，点进学校之后返回这个页面，还要回到原本的位置。
但这个div是固定高度，而且是一个分页。所以要获取div内部滚动了多少距离，用session存起来，再回到原本的位置；

 ////获取滚动距离
 var WT=0;
        $('.jg-list-page').on('scroll', function (e) {
            WT = parseInt(e.target.scrollTop);
        });
 //点击事件里存值
 function goJGHome(id, schId) {
 	sessionData.top = WT
 	sessionStorage.setItem("key", JSON.stringify(sessionData))
	window.location.href = "/DataPlatPublic/JGHome?id=" + id + "&schId=" + schId;
})

踩坑，var 的变量不要用top ,left之类的单词。
取值

$(function () {
        sessData = JSON.parse(sessionStorage.getItem("key"));
        if (sessData) {
            if (sessData.top) {
                $(".jg-list-page").animate({ scrollTop: sessData.top+"px"}, 200);
            }
        }