jQuery Scroll to Top
Еще одна тривиальная задача. Все видели кнопки наверх на сайтах (вконтакте левая часть страницы* К.О.). Намутим подобное. Подробнее по катом.
Собственно пост:
Способ номер раз (через анкоры)
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> |
Вот теперь при прокрутке страницы вниз будет выскакивать кнопочка «^ Вверх», а при нахождении внизу страницы она будет исчезать.
Надеюсь все более менее понятно. Если есть вопросы, задавайте в комментариях)
Комментарии
17.11.2012 в 12:27
скажите пожалуйста, можно лисделать так, чтоб прятать кнопку не по количеству пикселей, а по достижению якоря?
18.11.2012 в 16:23
Да, конечно. Никто не мешает вам с помощью того же scrollTop измерять расстояние от якоря до верха и прятать кнопку на вам нужном расстоянии.