UPD代码示例应该以较小的尺寸运行，而不是扩展到整个页面。当并非所有菜单项最初都可见并且您需要用鼠标滚动到它们时，问题就会出现。
有一段 jQuery 代码可以实现到锚点的平滑过渡。当整个页面滚动时，它可以正常工作，但在滚动的块内，所有内容都无法正常工作：
$('.main-nav a').on('click',function(e){
e.preventDefault();
let elementClick = $(this).attr('href');
let destination = $(elementClick).offset().top;
$('main').animate({ scrollTop: destination }, 1000);
});* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
height: 100vh;
font-size: 16px;
}
header, footer {
height: 20vh;
border: 1px solid maroon;
display: flex;
justify-content: center;
align-items: center;
}
main {
height: 60vh;
overflow: auto;
padding: 20px;
}
.main-nav {
display: flex;
flex-direction: column;
margin-bottom: 30px;
}
.main-nav a {
padding: 5px 0;
}
.content {
padding: 20px;
color: white;
height: 100vh;
}
#one, #four, #seven {
background-color: red;
}
#two, #five, #eight {
background-color: green;
}
#three, #six, #nine {
background-color: blue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<header>header</header>
<main>
<div class="main-nav">
<a href="#one">1. One</a>
<a href="#two">2. Two</a>
<a href="#three">3. Three</a>
<a href="#four">4. Four</a>
<a href="#five">5. Five</a>
<a href="#six">6. Six</a>
<a href="#seven">7. Seven</a>
<a href="#eight">8. Eight</a>
<a href="#nine">9. Nine</a>
</div>
<div class="content" id="one">One</div>
<div class="content" id="two">Two</div>
<div class="content" id="three">Three</div>
<div class="content" id="four">Four</div>
<div class="content" id="five">Five</div>
<div class="content" id="six">Six</div>
<div class="content" id="seven">Seven</div>
<div class="content" id="eight">Eight</div>
<div class="content" id="nine">Nine</div>
</main>
<footer>footer</footer>很明显，问题出在变量上destination。我尝试将其计算为从父级顶部到所需块的距离。对于第一个菜单项，它可以正常工作。但如果你滚动到较低的点，一切都会再次崩溃：
$('.main-nav a').on('click',function(e){
e.preventDefault();
let elementClick = $(this).attr('href');
//let destination = $(elementClick).offset().top;
let destination = $(elementClick).offset().top - $(elementClick).parent().offset().top - $(elementClick).parent().scrollTop();
$('main').animate({ scrollTop: destination }, 1000);
});* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
height: 100vh;
font-size: 16px;
}
header, footer {
height: 20vh;
border: 1px solid maroon;
display: flex;
justify-content: center;
align-items: center;
}
main {
height: 60vh;
overflow: auto;
padding: 20px;
}
.main-nav {
display: flex;
flex-direction: column;
margin-bottom: 30px;
}
.main-nav a {
padding: 5px 0;
}
.content {
padding: 20px;
color: white;
height: 100vh;
}
#one, #four, #seven {
background-color: red;
}
#two, #five, #eight {
background-color: green;
}
#three, #six, #nine {
background-color: blue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<header>header</header>
<main>
<div class="main-nav">
<a href="#one">1. One</a>
<a href="#two">2. Two</a>
<a href="#three">3. Three</a>
<a href="#four">4. Four</a>
<a href="#five">5. Five</a>
<a href="#six">6. Six</a>
<a href="#seven">7. Seven</a>
<a href="#eight">8. Eight</a>
<a href="#nine">9. Nine</a>
</div>
<div class="content" id="one">One</div>
<div class="content" id="two">Two</div>
<div class="content" id="three">Three</div>
<div class="content" id="four">Four</div>
<div class="content" id="five">Five</div>
<div class="content" id="six">Six</div>
<div class="content" id="seven">Seven</div>
<div class="content" id="eight">Eight</div>
<div class="content" id="nine">Nine</div>
</main>
<footer>footer</footer>显然，destination这种滚动到较低点的情况仍然需要以某种方式考虑在内。但我不知道该怎么做。我将非常感谢你的帮助。
1 个回答