JS控制div跳转到指定的位置的几种解决方案总结

JS控制控制div跳转到指定的位置的几种解决方案总结跳转到指定的位置的几种解决方案总结

主要介绍了JS控制div跳转到指定的位置的几种解决方案总结，小编觉得挺不错的，现在分享给大家，也给大家

做个参考。

总结一下自己在写这个需求遇到的问题，相信大家应该是经常遇到的。即要求滚轮滚动到指定的位置。先看下基本的解决方

案。

1.给链接a加个#的方式来实现跳转。（锚点方法）这里直接贴下代码:

<div id="container">

<a href="#div1">div1</a>

css样式：

div {

height: 800px;

width: 400px;

border: 2px solid black;

}

#container{

position: fixed;

margin:50px 500px;

}

<p id="p1">div1</p>

<p id="p2">div2</p>

<p id="p3">div3</p>

</div>

<div id="div1">div1</div>

<div id="div2">div2</div>

<div id="div3">div3</div>

css样式页面同上，看下js代码如下：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

$(document).ready(function() {

$("html, body").animate({

scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});

return false;

});

$("#p3").click(function() {

$("html, body").animate({

scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});

return false;

});

});