如何解决带有动画的jQuery滚动无法滚动到正确的位置
我的目标是,如果用户之前访问过该页面,则将其页面滚动到特定的div。我正在使用以下代码:
$('html,body').animate({
scrollTop: $("#userResults").offset().top - 72
},1000,"easeInOutExpo"
);
#userResults是适当的目标div。问题是,当页面加载时,它会滚动到页面的大致中间。我已经尝试过重新排列div,因为担心包含画布元素的一个div会丢掉某些东西,但这是行不通的。我尝试硬编码滚动值;我尝试检索页面高度和div高度以强制滚动位置,但是这些都不起作用。此外,当我针对不同的屏幕尺寸进行测试时,滚动会转到页面中间的不同位置。
最令人沮丧的是,当我单击加载的页面上的以div为目标的链接时,它们会转到确切的位置。这些使用以下代码:
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: (target.offset().top - 72)
},"easeInOutExpo");
return false;
}
}
});
最后一块代码来自我正在构建的模板,该模板来自:https://startbootstrap.com/themes/creative
以下是相关代码的代码笔:codepen可以在javascript的第99行周围找到特定的代码块。此外,codepen并未演示问题行为,可能是因为它不允许我在本地存储中创建变量。
我已经编写了大约一年的代码,所以我不是专家,可能需要一点处理。如何使该东西在加载时滚动到正确的位置?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。