2016-01-31 3 views
1

По какой-то причине я чувствую, что это должно быть легко, но я не могу заставить его работать, и я не могу найти решение в Интернете.Элемент прокрутки вверху переполненного родительского контейнера

У меня есть контейнер (#container), установленный для переполнения: прокрутка. Внутри находятся 3 divs, и все они имеют одну и ту же высоту (100%) в качестве родительского контейнера. Каждый из этих divs содержит ссылку.

Предположим, что вы прокручиваете вниз и получаете половину пути по второму div, тогда вы должны будете щелкнуть ссылку во втором div, которая заставит родительский div прокручивать вверх до вершины контейнера.

Это мой код:

HTML

<div id="container"> 
    <div> 
     <a href="#">link 1</a> 
    </div> 

    <div> 
     <a href="#">link 2</a> 
    </div> 

    <div> 
     <a href="#">link 3</a> 
    </div> 
</div> 

CSS

#container { 
    position: absolute; 
    height: 100%; 
    overflow: scroll; 
} 

div { 
    height: 100%; 
    width: 100%; 
} 

JQuery

$("a").click(function() { 
    // triggers parent div to scroll up to the parent container 
}); 

Мне удалось использовать scrollTop для прокрутки до div, но не для выравнивания div с родительским контейнером.

Надеюсь, это имеет смысл. Спасибо за помощь.

EDIT:

На основании ответа pilar1347 в поле ниже, вот Fiddle с кодом в действии: https://jsfiddle.net/julienfrog/w2oqsqc8/2/

+0

Можете ли вы привести пример где-нибудь, как скрипку? – GAntoine

+1

См. Выше. Я добавил скрипт на основе ответа pilar1347. – Julesfrog

ответ

3

Было бы полезно, чтобы увидеть пример вашего вопроса (а jsfiddle, как ArcaneCraeda предложил) , но scrollTop (0) что вы ищете?

в вашем JQuery:

$("a").click(function(){ 
    $("#container").scrollTop(0); 
}); 

Это должно перейти к верхней части #container DIV при нажатии на ссылку.

Однако, если то, что вы ищете для выбранного ДИВ привязки к верхней части #container, то вы можете что-то вроде этого:

$("a").click(function(){ 
    var clicked_idx = $(this).parent().index(); 
    var div_height = $(this).parent().height(); 
    var scroll_to = clicked_idx * div_height; 

    $("#container").scrollTop(scroll_to); 
}) 

Примечание: Это будет работать только, если все дочерние divs имеют одинаковую высоту.

+0

Спасибо. Отлично! index() - это то, что мне не хватало. Я узнал что-то новое. Я создам скрипку и добавлю ее к моему вопросу. Еще раз спасибо! – Julesfrog