Question

在侧边栏上单击锚标记时，页面必须向下滚动到内容。我得到了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>

Answer 1

（尚未测试）但应该是

$("html, body").animate({scrollTop: $('#page-content-wrapper')[0].scrollTop.offset().top}, 1000);

<强>更新

在这里，overflow: auto上的问题是body。我将JS清理为：JSFIDDLE

固定边栏 - 在另一个Div中平滑滚动

1 个答案: