JavaScript:滚动到DIV中的一个部分，使页面跳转和其他滚动不能按预期工作
JavaScript:滚动到DIV中的一个部分，使页面跳转和其他滚动不能按预期工作
提问于 2018-08-04 23:04:55
我有一个简单的页面，我打算在右边放置一个大的表单，在左侧有一个导航菜单，允许用户跳到大表单的部分(这也可以用于大文章-现在模拟的大小，我已经添加了一个大的底部填充与CSS)。右列已经使用height: 100vh设置了适合窗口高度的样式，下面是一个JsBin示例：https://jsbin.com/keniriz/edit?html,css,js,console,output
在我将放置表单的地方，我已经放置了一些锚点，我已经创建了一个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">的顶部，但是我注意到这并没有发生！有时它似乎只是进入视图，而且页面似乎跳到顶部，所以浏览器窗口顶部的<div class="aims-form__form">……我不希望这事发生。很明显，我的实现出了问题，下面是Javascript：
function scrollToAchor(where) {
var element = document.querySelector('.aims-form__form').querySelector('a[name="' + where + '"]');
element.scrollIntoView({ behavior: 'smooth' });
}谁能告诉我如何克服页面跳转到顶部的问题，以及如何将可滚动部分带到页面顶部？任何建议都是值得感谢的。
再一次，这里是一个完整的(带有必要的css) https://jsbin.com/keniriz/edit?html,css,js,console,output的jsbin。
回答 1
Stack Overflow用户
发布于 2018-08-05 00:04:13
如果您正在使用链接，则不需要使用scrollIntoView。你可以只给锚标签一个#的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中滚动到元素的确切位置(元素将定位在视口的正上方)。
<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>
为了平滑滚动，您可以使用使用window.scrollTo和setTimeout的for循环来缓慢滚动。
<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。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51686841
复制相关文章
相似问题