jquery返回数据不显示空格,jQuery offset（）。top返回错误的值 - 带有空白的错误...

if you try to get a top offset from a list element within a parent, and that parent is not positioned at the top, you will get a wrong value.

Try removing the margin-top on the .container element and you will see it will work.

What is the solution for this problem?

解决方案

Your question:

What is the solution for this problem?

I suggest you to position the .container to relative:

.container{

margin-top:100px;

background:yellow;

height:600px;

width:300px;

overflow-y:auto;

overflow-x:hidden;

position:relative; /*

}

and within your script use .position().top, it will make your life easier:

$('.container li:nth-child(7)').css("background", "red");

$('.container').animate({

scrollTop: $('.container li:nth-child(7)').position().top

});

.offset().top:

Description: Get the current coordinates of the first element in the set of matched elements, relative to the document..

.position().top:

From the docs:

Description: Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

.position().top is calculated from the top to the parent if parent is relatively positioned.

$(function() {

$('.container li:nth-child(7)').css("background", "red");

$('.container').animate({

scrollTop: $('.container li:nth-child(7)').position().top

});

});

html,

body {

margin: 0;

padding: 0;

}

.container {

margin-top: 100px;

background: yellow;

height: 600px;

width: 300px;

overflow-y: auto;

overflow-x: hidden;

position: relative;

}

.container ul {

margin: 0;

padding: 0;

list-style: none outside none;

}

.container li {

background: blue;

display: block;

height: 150px;

width: 100%;

padding: 10px;

margin-bottom: 5px;

}

• asdasd
• asdasd
• asdasd
• asdasd
• asdasd
• asdasd
• asdasd77
• asdasd
• asdasd
• asdasd
• asdasd