[英]Scroll down on click doesn't work well
我有菜单标题,在菜单上单击它会向下滚动到具有类似ID的div,这是代码:
$(".menu").click(function(){
var y = $(this).attr('id');
var x = $('#'+y+'e').offset().top;
$('.row').animate({scrollTop:x-60},1000);
});
这里的示例但是,当我单击“约”时,滚动单击注册后,它什么都不做;当我单击“注册”后的联系人时,它向下滚动以注册,当我再次单击“联系”时,它又回到了约。 仅当我单击两次或大约两次,然后单击菜单中的其他按钮后,该按钮才起作用。 试试看,您会看到我在说什么。
html代码:
<div class="row">
<div id="homee" class="content" style="background: red;"></div>
<div id="aboute" class="content" style="background: blue;"></div>
<div id="registere" class="content" style="background: yellow;"></div>
<div id="contacte" class="content" style="background: green;"></div>
</div>
由于尚未提供code
,因此很难解决问题,但是在设置动画时可能只是缺少.stop()
。 看我的例子
jsFiddle链接: https ://jsfiddle.net/3x6wq73f/2/
使用Javascript
$(function() {
$('.scroll').on('click', function() {
var $target = $('.'+$(this).data('scroll-target'));
var $parent = $target.parent();
$('div').stop().animate({
scrollTop: $parent.scrollTop() + $target.position().top - 50//$('.' + target).offset().top
}, 'slow');
});
});
HTML
<div class="buttons">
<a class="scroll" data-scroll-target="first">First</a>
<a class="scroll" data-scroll-target="second">Second</a>
<a class="scroll" data-scroll-target="third">Third</a>
<a class="scroll" data-scroll-target="fourth">Fourth</a>
</div>
<div class="parent-div">
Parent div
<div class="huge-content first">
One
</div>
<div class="huge-content second">
Two
</div>
<div class="huge-content third">
Three
</div>
<div class="huge-content fourth">
Four
</div>
</div>
CSS
.buttons {
position: fixed;
width: 100%;
top: 0;
left: 0;
height: 50px;
background-color: #fff;
border: solid 1px #f0f;
}
.parent-div {
margin-top: 50px;
padding: 15px;
background-color: #000;
color: #fff;
max-height: 500px;
overflow: auto;
}
.huge-content {
height: 500px;
}
.first {
background-color: #f00;
}
.second {
background-color: #0f0;
}
.third {
background-color: #00f;
}
.fourth {
background-color: #f0f;
}
更新
现在尝试我的jsFiddle,看看我的代码。 您要做的就是让父母的scrollTop加上目标。 我还必须添加50
因为我的导航固定位置高度:50 CSS属性
代替:
$('.row').animate({scrollTop:x-60},1000);
做这个:
$('html, body').animate({scrollTop:x-60},1000);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.