如何解决div内部的scolltop div
我在另一个div内有一个div。当我单击链接时,scrollTop的值始终会更改。
第一次,值是正确的,但其他所有时间,值都会更改。有时甚至是负面的。
HTML代码
<div id="head">
<div onclick="go('#sezione1')" class="link">link 1</div>
<div onclick="go('#sezione2')" class="link">link 2</div>
<div onclick="go('#sezione3')" class="link">link 3</div>
<div onclick="go('#sezione4')" class="link">link 4</div>
</div>
<div id="section">
<div id="sezione1">
<h1>Sezione 1</h1>
...
lorem
</div>
</div>
<div id="sezione2">
<h1>Sezione 2</h1>
...
</div>
<div id="sezione3">
<h1>Sezione 3</h1>
...
</div>
<div id="sezione4">
<h1>Sezione 4</h1>
...
</div>
</div>
</div>
</div>
<div id="scroll"></div>
CSS代码
#main{
border: 2px solid #000000;
width:500px;
margin:30px auto;
height: 60vh;
overflow-y: scroll;
}
#head{
background:red;
color:#ffffff;
margin:0px;
height:30px;
position:fixed;
width:500px;
}
.link{
margin:5px;
cursor:pointer;
float:left;
}
#section{
margin-top:30px;
}
JS代码
function go(sezione){
var scrollPos = $(sezione).offset().top - 60;
$("#scroll").html("SCROLL POSITION -->"+scrollPos);
$("#main").animate(
{
scrollTop: $(sezione).offset().top - 60,},800
);
scrollpos = 0;
}
我为我的问题创作了一支笔。 https://codepen.io/salvatorecasalino/pen/mdPmogP
解决方法
您可以使用以下内容。
scrollTop: $(sezione)[0].offsetTop - 60
演示
function go(sezione) {
var scrollPos = $(sezione).offset().top - 60;
$("#scroll").html("SCROLL POSITION -->" + scrollPos);
$("#main").animate({
scrollTop: $(sezione)[0].offsetTop - 60,},800
);
scrollpos = 0;
}
#main {
border: 2px solid #000000;
width: 500px;
margin: 30px auto;
height: 60vh;
overflow-y: scroll;
}
#head {
background: red;
color: #ffffff;
margin: 0px;
height: 30px;
position: fixed;
width: 500px;
}
.link {
margin: 5px;
cursor: pointer;
float: left;
}
#section {
margin-top: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
<div id="head">
<div onclick="go('#sezione1')" class="link">link 1</div>
<div onclick="go('#sezione2')" class="link">link 2</div>
<div onclick="go('#sezione3')" class="link">link 3</div>
<div onclick="go('#sezione4')" class="link">link 4</div>
</div>
<div id="section">
<div id="sezione1">
<h1>Sezione 1</h1>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam,sit tempore culpa consequuntur nostrum vero quam molestiae dolorem similique ipsum sed blanditiis non! Odit corporis odio totam velit. A,non? Lorem ipsum dolor sit amet consectetur adipisicing
elit. Quod,quaerat dicta. Sunt sapiente eaque officiis delectus quo quia nihil magnam vero,assumenda nam laudantium,quis voluptas quaerat aliquam consequatur alias! Lorem ipsum dolor sit,amet consectetur adipisicing elit. Voluptatem facere dignissimos
magnam earum distinctio itaque ut quia ullam eligendi fugit aliquid quasi suscipit iste necessitatibus adipisci magni rem,reiciendis quas. lorem
</div>
<div id="sezione2">
<h1>Sezione 2</h1>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam,quis voluptas quaerat aliquam consequatur alias!
</div>
<div id="sezione3">
<h1>Sezione 3</h1>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam,quis voluptas quaerat aliquam consequatur alias!
</div>
<div id="sezione4">
<h1>Sezione 4</h1>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam,quis voluptas quaerat aliquam consequatur alias!
</div>
</div>
</div>
<div id="scroll"></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。