Окно прокрутки DIVs

Question

Добрый вечер,

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

В любом случае, я пытаюсь сделать 6 разделов, которые находятся по всей странице, что делает окно прокручиваемым. Я намереваюсь иметь навигационную панель, которая z-индексируется поверх всего остального, содержащая ссылки для запуска прокрутки.

Все, что мне нужно понять, это часть jQuery, а также файлы, которые мне нужно будет ссылаться.

PS. Если вы думаете, что знаете свои вещи, не могли бы вы сказать мне, будут ли плавающие divs читаемыми функцией «смещения» jQuery? Я рассматривал использование таблицы и хранение различных div в ячейках этой таблицы. : S Я ненавижу таблицы ...

Благодарим за помощь.

Answer 1

Итак, вы говорите, что ваша проблема заключается в том, что у вас есть несколько DIV, и вы хотите прокручивать их из ссылок навигации?

Вам не нужен JQuery, вам даже не нужен Javascript. Просто поставьте якорный тег в начале каждого DIV и перейдите к нему.

<DIV id="navigationBar"> 
    <a href="#section1_nav">Go to section 1</a> 
    <a href="#section2_nav">Go to section 2</a> 
</DIV> 

<DIV id="section1"> 
    <a name="section1_nav"></a> 
</DIV> 

<DIV id="section2"> 
    <a name="section2_nav"></a> 
</DIV> 

Answer 2

Самый простой способ для вас, чтобы позиционировать <div> «s будет с CSS абсолютного позиционирования, который вы можете узнать больше о in this guide. Это наиболее последовательно отображается во всех браузерах и даст вам точный контроль над тем, где были размещены контейнеры:

<ul id="nav"> 
    <li><a href="#first">First</a></li> 
    <li><a href="#second">Second</a></li> 
    <li><a href="#third">Third</a></li>  
</ul> 
<div id="first">First content container</div> 
<div id="second">Second content container</div> 
<div id="third">Third content container</div> 

С помощью CSS по следующим направлениям:

ul { 
    position: fixed; 
    z-index: 2; 
    top: 20px; 
    right: 20px; 
} 

div { 
    position: absolute; 
    z-index: 1; 
    width: 100px; 
    height: 100px;  
} 

#first { 
    top: 10px; 
    left: 10px; 
} 

#second { 
    top: 1000px; 
    left: 500px; 
} 

#third { 
    top: 500px; 
    left: 100px; 
} 

затем на самом деле прокрутки в различные <div> «s по щелчку, можно использовать jQuery scrollTo plugin:

$('a').click(function(e) { 
    // Stop default link click from occuring 
    e.preventDefault(); 

    // Scroll to the position using the jQuery scrollTo plugin 
    // Element id is taken from link's href attribute 
    $(window).scrollTo($(this).attr('href'), {duration: 500}); 
}); 

вы можете увидеть простой пример in action here.