我有以下代码。我试图在点击按钮时水平滚动到div。
jQuery(document).ready(function() {
jQuery("#clickme").click(function() {
jQuery("#parent").animate({
scrollLeft: jQuery("#child").position().left
}, 500);
});
});

#parent {
width: 1000px;
height: 200px;
background: #ccc;
position: relative;
}
#child {
position: absolute;
right: 200px;
height: 100px;
width: 100px;
background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<button id="clickme">
Click Me
</button>
<div id="child">
child div
</div>
</div>
&#13;
控制台中没有错误。我做错了什么?
答案 0 :(得分:3)
&#34;你应该制作动画,因为它是有滚动条的人。&#34;
如果方案类似于this,
,您的代码应该是正确的(只需改变你的CSS)
#parent {
width: 350px; /* Make it shorter for scroll to work */
height: 200px;
background: #ccc;
position: relative;
overflow: scroll; /* To show scrollbar */
}
#child {
position: absolute;
right: -150px; /* Make it negative also to make scroll working */
height: 100px;
width: 100px;
background: blue;
}
正如你在那里看到的那样,如果你的代码就像那样......
但是现在,我将根据你当前的情况......
来自jQuery("#parent")
,应为jQuery("body")
现在工作:
jQuery(document).ready(function() {
jQuery("#clickme").click(function() {
jQuery('body').animate({
scrollLeft: jQuery("#child").position().left
}, 500);
});
});
&#13;
#parent {
width: 1000px;
height: 200px;
background: #ccc;
position: relative;
}
#child {
position: absolute;
right: 200px;
height: 100px;
width: 100px;
background: blue;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<button id="clickme">
Click Me
</button>
<div id="child">
child div
</div>
</div>
&#13;
答案 1 :(得分:0)
请看下面的代码。对于滚动动画,请转到jQuery("html,body").animation
而不是#parent
jQuery(document).ready(function() {
jQuery("#clickme").click(function() {
jQuery("html,body").animate({
scrollLeft: jQuery("#child").position().left
}, 500);
});
});
#parent {
width: 1000px;
height: 200px;
background: #ccc;
position: relative;
}
#child {
position: absolute;
right: 200px;
height: 100px;
width: 100px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<button id="clickme">
Click Me
</button>
<div id="child">
child div
</div>
</div>