我有一个简单的页面，我将在右侧放置一个大表单，在左侧放置一个导航菜单，允许用户跳转到大表单的各个部分(这也可以用于大型文章) - 现在为了模拟尺寸，我用 CSS 添加了一个大的底部填充)。右栏的样式已使用 height: 100vh 设置为适合窗口的高度。这是一个 JsBin 示例:https://jsbin.com/keniriz/edit?html,css,js,console,output
我放置表单的位置我已经放置了一些 anchor 并且我创建了一个 Javascript 函数来将表单滚动到需要的位置。这是我的 HTML...
<div class="aims-form">
<div class="aims-form__navigation">
<ul>
<li>
<a onClick="scrollToAchor('section1')" class="aims-form__anchor">Section 1</a>
</li>
<li>
<a onClick="scrollToAchor('section2')" class="aims-form__anchor">Section 2</a>
</li>
<li>
<a onClick="scrollToAchor('section3')" class="aims-form__anchor">Section 3</a>
</li>
<li>
<a onClick="scrollToAchor('section4')" class="aims-form__anchor">Section 4</a>
</li>
</ul>
</div>
<div class="aims-form__form">
<section>
Section 1<a name="section1"></a>
<br>
Content coming soon...
</section>
<section>
Section 2<a name="section2"></a>
<br>
Content coming soon..
</section>
<section>
Section 3<a name="section3"></a>
<br>
Content coming soon..
</section>
<section>
Section 4<a name="section4"></a>
<br>
Content coming soon..
</section>
</div>
</div>
现在，当我单击左侧的其中一个链接时，我希望相应的部分滚动到 <div class="aims-form__form"> 的顶部但是我注意到这不会发生!有时它似乎只是进入 View 并且页面似乎跳到顶部所以 <div class="aims-form__form">到浏览器窗口的顶部...我不希望这种情况发生。显然我的实现有问题，这里是 Javascript:
function scrollToAchor(where) {
var element = document.querySelector('.aims-form__form').querySelector('a[name="' + where + '"]');
element.scrollIntoView({ behavior: 'smooth' });
}
谁能告诉我如何解决页面跳到顶部的问题以及如何将可滚动部分带到页面顶部？任何建议表示赞赏。
再一次，这是一个完整的 jsbin(带有必要的 css) https://jsbin.com/keniriz/edit?html,css,js,console,output
最佳答案
如果您使用链接，则不需要使用 scrollIntoView。您可以只给 anchor 标记一个 href 的 # 加上您要滚动到的链接的 name 属性。
<a href="#section">Section</a>
<!--Will scroll to:-->
<a name="section">Section!!!</a>
<div class="aims-form">
<div class="aims-form__navigation">
<ul>
<li>
<a href='#section1' class="aims-form__anchor">Section 1</a>
</li>
<li>
<a href='#section2' class="aims-form__anchor">Section 2</a>
</li>
<li>
<a href='#section3' class="aims-form__anchor">Section 3</a>
</li>
<li>
<a href='#section4' class="aims-form__anchor">Section 4</a>
</li>
</ul>
</div>
<div style="margin-top: 300px;"></div>
<div class="aims-form__form">
<section style="margin: 200px;">
Section 1<a name="section1"></a>
<br>
Content coming soon...
</section>
<section style="margin: 200px;">
Section 2<a name="section2"></a>
<br>
Content coming soon..
</section>
<section style="margin: 200px;">
Section 3<a name="section3"></a>
<br>
Content coming soon..
</section>
<section style="margin: 200px;">
Section 4<a name="section4"></a>
<br>
Content coming soon..
</section>
</div>
</div>
<script>
</script>您还可以使用 window.scrollTo(0, element.offsetTop) 通过 Javascript 滚动到元素的确切位置(该元素将位于视口(viewport)的顶部)。
<html>
<head>
<style>
section{
margin: 200px;
}
</style>
</head>
<body>
<div class="aims-form">
<div class="aims-form__navigation">
<ul>
<li>
<a onClick="scrollToAchor('section1')" class="aims-form__anchor">Section 1</a>
</li>
<li>
<a onClick="scrollToAchor('section2')" class="aims-form__anchor">Section 2</a>
</li>
<li>
<a onClick="scrollToAchor('section3')" class="aims-form__anchor">Section 3</a>
</li>
<li>
<a onClick="scrollToAchor('section4')" class="aims-form__anchor">Section 4</a>
</li>
</ul>
</div>
<div class="aims-form__form">
<section>
Section 1<a name="section1"></a>
<br>
Content coming soon...
</section>
<section>
Section 2<a name="section2"></a>
<br>
Content coming soon..
</section>
<section>
Section 3<a name="section3"></a>
<br>
Content coming soon..
</section>
<section>
Section 4<a name="section4"></a>
<br>
Content coming soon..
</section>
</div>
</div>
<div style="margin-bottom: 500px;"></div>
<script>
function scrollToAchor(where) {
var element = document.querySelector('.aims-form__form').querySelector('a[name="' + where + '"]');
window.scrollTo(0, element.offsetTop);
}
</script>
</body>
</html>为了平滑滚动，您可以使用 for 循环，使用 window.scrollTo 和 setTimeout 来缓慢滚动。
<html>
<head>
<style>
section{
margin: 200px;
}
</style>
</head>
<body>
<div class="aims-form">
<div class="aims-form__navigation">
<ul>
<li>
<a onClick="scrollToAchor('section1')" class="aims-form__anchor">Section 1</a>
</li>
<li>
<a onClick="scrollToAchor('section2')" class="aims-form__anchor">Section 2</a>
</li>
<li>
<a onClick="scrollToAchor('section3')" class="aims-form__anchor">Section 3</a>
</li>
<li>
<a onClick="scrollToAchor('section4')" class="aims-form__anchor">Section 4</a>
</li>
</ul>
</div>
<div class="aims-form__form">
<section>
Section 1<a name="section1"></a>
<br>
Content coming soon...
</section>
<section>
Section 2<a name="section2"></a>
<br>
Content coming soon..
</section>
<section>
Section 3<a name="section3"></a>
<br>
Content coming soon..
</section>
<section>
Section 4<a name="section4"></a>
<br>
Content coming soon..
</section>
</div>
</div>
<div style="margin-bottom: 500px;"></div>
<script>
function scrollToAchor(where) {
var element = document.querySelector('.aims-form__form').querySelector('a[name="' + where + '"]');
var position = element.offsetTop;
for(let i = 10; i <= position; i+=10){
setTimeout(function(){
window.scrollTo(0, i);
}, i/2);
}
}
</script>
</body>
</html>有关平滑滚动的更全面的方法列表，请参阅我的回答 here .
关于JavaScript:滚动到 DIV 中的某个部分使页面跳转和其他滚动没有按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51686841/