当点击侧边栏上的 anchor 标记时,页面必须向下滚动到内容。我得到了 scrollTop 的正确偏移量,但它没有向下滚动。如何解决这个滚动问题
我的 HTML - 包括一个固定的侧边栏
<div id="sidebar-wrapper">
<ul class="sidebar-nav" id="sidebar">
<li class="sidebar-brand"><a id="menu-toggle" href="#">Menu<i class="fa fa2 fa-align-justify"></i></a></li>
<li><a href="">Home<i class="fa fa-home "></i></a></li>
<li><a href="#about">About<i class="fa fa-beer"></i></a></li>
<li><a href="#resume">Resume<i class="fa fa-rocket"></i></span></a></li>
<li><a href="#work">Work<i class="fa fa-headphones"></i></a></li>
<li><a href="#contact">Contact<i class="fa fa-heart"></i></a></li>
</ul>
</div>
<div id="page-content-wrapper">
<div class="page-content inset">
<!-- Home Page -->
<div class="row container-full" id="home">
</div>
<!-- Home Page End -->
<!-- About Page -->
<div class="row container-full" id="about">
我的 CSS
html,body{
height:100%;
overflow:auto; // For chrome rendering
}
#wrapper {
padding-left: 70px; // For toggling effect
transition: all 0.4s ease 0s;
height: 100%;
}
#sidebar-wrapper {
-webkit-transform: translateZ(0);
margin-left: -150px;
left: 70px;
width: 150px;
background: #000;
position: fixed;
height: 100%;
overflow-y: auto;
z-index: 10000;
transition: all 0.4s ease 0s;
}
.page-content{
height:auto;
}
#page-content-wrapper {
width: 95%;
height: auto;
}
这是 Javascript。我放入警报以查看它是否返回属性所在的正确位置。警报工作正常
<script>
$('#sidebar a').click(function() {
var goTo = $($(this).attr('href')); // selects element that was clicked
var offset = goTo.offset(); //grabs position of element
alert(goTo.offset().top);
$('#page-content').animate({
scrollTop: $('#page-content-wrapper')[0].scrollTop + goTo.offset().top
}, 1000);
return false;
});
</script>
最佳答案
(未测试)但应该是
$("html, body").animate({scrollTop: $('#page-content-wrapper')[0].scrollTop.offset().top}, 1000);
更新
好了,问题是 body
上的 overflow: auto
。我将 JS 清理为:JSFIDDLE
关于jquery - 固定边栏 - 在另一个 Div 中平滑滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20895605/