gpt4 book ai didi

javascript - 根据 div 在父级中的位置滚动父级 div 溢出

转载 作者:行者123 更新时间:2023-11-27 23:53:55 26 4
gpt4 key购买 nike

我有页面的 3 个部分:

<div class="container" id="main-container">
<div class="section" id="profile">
Hello World
</div>
<div class="section" id="projects">
Hello World 2
</div>
<div class="section" id="contact">
Hello World 3
</div>
</div>

我的导航中有 3 个链接:

<body onresize="scroll()">
<div class="nav">
<div class="nav-link" id="profile">
<a>
Profile
</a>
</div>
<div class="nav-link" id="projects">
<a>
Projects
</a>
</div>
<div class="nav-link" id="contact">
<a>
Contact
</a>
</div>
</div>

#main-container 有溢出滚动,每个部分占据页面的 100% 宽度和高度。

我试图做到这一点,以便在单击其中一个链接时,它会为该部分设置滚动效果:

$(document).ready(function () {
$('.nav-link').on('click', function () {
if ($(window).width() < 768) {
let section = $(".section#"+$(this).attr('id')).position();
$('#main-container').animate({
scrollTop: section.top
}, 500);
}
});
});

但这不起作用,position() 的值会根据用户滚动到的位置而变化。如何根据 #main-container 获取 $main-container 部分的滚动位置?以及如何制作动画滚动到它?

最佳答案

试试offset()

let section = $(".section#"+$(this).attr('id')).offset();

关于javascript - 根据 div 在父级中的位置滚动父级 div 溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56377107/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com