我的页面左侧有一个固定的 div (#navigation),右侧有一个可滚动的 div (#content)。单击#navigation 中的链接时,它应该触发平滑滚动到#content 的更正部分。第二次单击链接后会发生什么情况,它会转到#content 的错误部分。您可以在 http://germanespitia.com 中查看所有实际源代码。
所以..
导航:
<div id="navigation">
`enter code here` <div class="nav-item" data-page="about-me">
<a href="#about-me" >
</a>
</div>
<div class="nav-item" data-page="projects">
<a href="#projects" >
</a>
</div>
<div class="nav-item" data-page="portfolio">
<a href="#portfolio" >
</a>
</div>
<div class="nav-item" data-page="contact">
<a href="#contact" >
</a>
</div>
</div>
内容:
<div id="content">
<div class="section" id="about-me">
</div>
<div class="section" id="projects">
</div>
</div>
jQuery:
$('#navigation a').click(function() {
var goTo = $($(this).attr('href')); // selects element that was clicked
var offset = goTo.offset(); //grabs position of element
$('#content').animate({
scrollTop: goTo.offset().top
}, 1000);
return false;
$('#about-me h1').text(goTo.attr('href'));
});
最佳答案
$('#navigation a').click(function() {
var goTo = $($(this).attr('href')); // selects element that was clicked
var offset = goTo.offset(); //grabs position of element
$('#content').animate({
scrollTop: goTo.offset().top
}, 1000);
return false;
$('#about-me h1').text(goTo.attr('href'));
});
您滚动到的偏移量是您应该修复的元素中当前位置的偏移量
scrollTop: goTo.offset().top
到
scrollTop: $('#content')[0].scrollTop + goTo.offset().top
可能有用
关于jquery - 通过使用 jQuery 单击 anchor 来平滑滚动元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20039346/