Question

我试图努力实现我认为相当容易的平滑滚动效果，这导致了很多挫折和困惑，这就是我来这里寻求帮助的原因（我＆＃39;有时候没有把事情做得那么好，所以请纠正我或者告诉我一些事情是否不清楚，谢谢）

我想要达到的目标是：

平滑滚动到div元素内部的div。这次是2，所以将有2个菜单和2个div包含我要滚动到的div元素。

我尝试了很多东西：

balupton.scrollto插件：这是否会以某种方式在它滚动到所选项目之前跳回顶部。

flesler的jquery.scrollTo：无法让它与div中的div一起使用。

然后是jQuery Scrolltop：这不知何故让div的坐标错误

我用一个菜单和一个div做了一个快速的jsfiddle给出了一个想法：https://jsfiddle.net/6wmtfuuv/

HTML

<div id="nav">
 <a href="#pro1" id="project1"> button1 </a>  <br><br>
 <a href="#pro2" id="project2"> button2 </a>  <br><br>
 <a href="#pro3" id="project3"> button3 </a>  <br><br>
 <a href="#pro4" id="project4"> button4 </a>  <br><br>
 <a href="#pro5" id="project5"> button5 </a>  <br><br>
 <a href="#pro6" id="project6"> button6 </a>  <br><br>
</div>

<div id="wrapperleft">
 <div id="pro1">this is pro 1 </div>           
 <div id="pro2">this is pro 2 </div>           
 <div id="pro3">this is pro 3 </div>           
 <div id="pro4">this is pro 4 </div>           
 <div id="pro5">this is pro 5 </div>                            
 <div id="pro6">this is pro 6 </div>
</div>

CSS

#wrapperleft {
 position:absolute;
 left:0px;
 top:0px;
 height:100%;
 overflow:scroll;
}

#pro1,#pro2,#pro3,#pro4,#pro5,#pro6 {
 position:relative;
 height:800px;
 width:300px;
}

#nav {
 position:fixed;
 z-index:200;
 top:20px;
 right:20px;
}

Answer 1

我有this gist，它显示了实现这一目标所需的一切。我会在这里粘贴内容，所以不需要进去。

<!-- Include jQuery from somewhere, must use version 1.8 or above -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript"> 
  $('html, body').animate({
    scrollTop: $("#target-element").offset().top
  }, 4000);
</script>

这应该可以帮助你实现它。

使用jQuery平滑滚动到div中的div元素

1 个答案: