jQuery Scroll to Top

08 Июня 2012 3480 ,

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

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

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

1
2
3
<div id="ancor"></div> <!-- Где то в шапке после <body> -->
<!-- Много вашего кода -->
<a href="#ancor"> Вверх</a><!-- Где то в подвале перед </body> -->

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

1
2
3
4
5
6
7
<script type="text/javascript">
    jQuery(function() {
        jQuery('#toTop').click(function() { //Действие по клику на объект с id="toTop"
            jQuery('body,html').animate({scrollTop:0},800); // Что делаем по клику... за 0.8 секунды прокручиваем страницу до расстояния в 0px от верхнего края body (html указан на всякий случай).
        });
    });
</script>

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

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

Кнопка, к которой будет привязано действие.

1
<div id="toTop">^ Вверх</div>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
#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; /* Цвет текста */
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
jQuery(function() {
   jQuery(window).scroll(function() {
      if(jQuery(this).scrollTop() != 0) { // Если до верха не 0px
         jQuery('#toTop').fadeIn();  // Плавно показываем кнопочку :)
      } else {                            // Иначе (Если мы вверху страницы)
         jQuery('#toTop').fadeOut(); // Столь же плавно эту самую кнопочку скрываем
      }
   });
 
   jQuery('#toTop').click(function() {
      jQuery('body,html').animate({scrollTop:0},800);
   });   
});
</script>

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

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

Подписывайтесь на обновления

Читайте RSS ленту

Комментарии

  • денис ответить
    17.11.2012 в 12:27

    скажите пожалуйста, можно лисделать так, чтоб прятать кнопку не по количеству пикселей, а по достижению якоря?

    • Федор Майоров ответить
      18.11.2012 в 16:23

      Да, конечно. Никто не мешает вам с помощью того же scrollTop измерять расстояние от якоря до верха и прятать кнопку на вам нужном расстоянии.

Добавить комментарий