2015-12-03 5 views
2

Я использую JQuery для прокрутки выбранного элемента списка в виде в div, где переполнение установлено для прокрутки. Следующий код работает нормально, но он прокручивает выбранный элемент списка вверху экрана, а не вверху #QuestionScroller div. Это выводит его из вида в соответствии с приведенным выше содержанием. Я добавил 75px смещение, но это не идеально, так как высота содержимого выше может меняться в зависимости от размера видового экрана. Итак, как адаптировать сценарий для прокрутки вверху #QuestionScroller div не вверх страницы?JQuery scroll li id ​​to top of div

$(window).load(function() { 
    var contactTopPosition = $("#ListItemQuestion<%=Session["QuestionID"] %>").position().top - 75; 
    $("#QuestionScroller").animate({ scrollTop: contactTopPosition },2500); 
}); 

ответ

1

См. Приведенный ниже код. Надеюсь, это будет полезно для вас.

var container = $('#QuestionScroller'), 
 
    scrollTo = $('#ListItemQuestion'); 
 
    container.animate({scrollTop: scrollTo.offset().top - container.offset().top + 
 
         container.scrollTop()});
#QuestionScroller { 
 
    width: 200px; 
 
    height: 70px; 
 
    border: 1px solid blue; 
 
    overflow: auto; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="QuestionScroller"> 
 
    <ul> 
 
     <li id='row_1'>111111</li> 
 
     <li id='row_2'>222222</li> 
 
     <li id='row_3'>333333</li> 
 
     <li id='ListItemQuestion'>444444</li> 
 
     <li id='row_5'>555555</li> 
 
     <li id='row_6'>666666</li> 
 
     <li id='row_7'>777777</li> 
 
     <li id='row_8'>888888</li> 
 
     <li id='row_9'>999999</li> 
 
    </ul> 
 
</div>

0

Вы можете сделать так
$("body").animate({scrollTop:$(“##QuestionScroller”).offset().top},2500)
может работать?

+0

Я думаю, что будет прокручиваться Див #QuestionScroller к вершине, но мне нужно для прокрутки элемента списка ID #ListItemQuestion в верхней части сНу #QuestionScroller. Код в моем OP выше работает красиво, чтобы прокручивать элемент списка до верхней части страницы -75, но мне нужно прокрутить до вершины div #QuestionScroller. – IainB