maeln0r

jQuery Scroll to Top

Еще одна тривиальная задача. Все видели кнопки наверх на сайтах (вконтакте левая часть страницы* К.О.). Намутим подобное. Подробнее по катом.

Собственно пост:

Способ номер раз (через анкоры)

[cce lang=»html»]



Вверх
[/cce]

Способ номер 2 ( jQuery ). Тестил в IE 6-9 и остальных браузерах.

[cce lang=»javascript»]

[/cce]

Не забудьте подключить jQuery :)

Оба способа хороши, но что делать, если страница невероятной длины или контент подгружается по мере прокрутки? Для желающих же исправить эту ситуацию листинг кода:

Кнопка, к которой будет привязано действие.
[cce lang=»html»]

^ Вверх

[/cce]

Немного CSS оформления

[cce lang=»css»]
#toTop {
width:70px; /* Ширина кнопки*/
border:1px solid #bebebe; /* Рамка вокруг */
background:#fafafa; /* Цвет фона */
text-align:center; /* Выравнивание текста внутри блока */
padding:5px; /* Отступ от текста во все стороны */
position:fixed; /* Фиксируем положение кнопки*/
bottom:10px; /* Отступ снизу*/
right:10px; /* Отступ справа */
cursor:pointer; /* курсор лапа :) */
display:none; /* Скрываем */
color:#333; /* Цвет текста */
}
[/cce]

Немного дополняем наш Java Script код, для того, что бы показывать кнопку только в нужный момент (когда отступ от верхнего края страницы не нулевой)

[cce lang=»javascript»]

[/cce]

Вот теперь при прокрутке страницы вниз будет выскакивать кнопочка «^ Вверх», а при нахождении внизу страницы она будет исчезать.

Надеюсь все более менее понятно. Если есть вопросы, задавайте в комментариях)