Фильтр по:
  

Как сделать появляющуюся / скрывающуюся ссылку «Наверх»?

Как сделать...

  • Страница 1 из 1
  • 1
Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Как сделать появляющуюся / скрывающуюся ссылку «Наверх»? (Инструкция)
Как сделать появляющуюся / скрывающуюся ссылку «Наверх»?
Дата: Вторник, 31.05.2011, 07:25 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Q:
Quote (sunlive)
Добрый вечер. Не нашел более подходящей темы. Вопрос следующий: есть новость (да и просто страницы), которая(ые) довольно длинная(ые), особенно это ощущается на нетбуке. Так вот. Как можно сделать появляющуюся ссылку "Наверх". По сути это делается через якоря, но как сделать, чтобы ссылка не висела все время? Думаю станет намного понятнее, если посмотрите, как появляется "Наверх" ВКонтакте. Вот что-то подобное.


В шаблон, перед закрывающим тегом </body> добавляем HTML-код:
Code
<a id="to_Top" href="javascript://" onclick="scroll(0,0);return false" /> </a>


И вставляем скрипт, который будет скрывать / показывать кнопочку:
Облегчённый вариант:
Code
<script type="text/javascript">
(function(){$(function(){var toTop=$('#to_Top').hide();
if($(window).scrollTop()>'20'){toTop.fadeIn()};$(window).scroll(function(){if($(window).scrollTop()<'20'){toTop.fadeOut()}else{toTop.fadeIn()};});});
})();
</script>

Где:
if($(window).scrollTop()>'20') - при каком значении величины сколла (в пикселях) должна появляться кнопка;
if($(window).scrollTop()<'20') - при каком значении исчезать.

Добавляем стили кнопочке:
Либо в шаблон:
Code
<style type="text/css">
#to_Top{width:70px;height:18px;position:fixed;bottom:30px;right:30px;background:url(http://likbezz.ru/_source/_img/2011/01/upbtt.png) no-repeat 0 0;cursor:pointer;text-decoration:none;outline:0 none;z-index:999;}
</style>


Либо в CSS:
Code
#to_Top{width:70px;height:18px;position:fixed;bottom:30px;right:30px;background:url(http://likbezz.ru/_source/_img/2011/01/upbtt.png) no-repeat 0 0;cursor:pointer;text-decoration:none;outline:0 none;z-index:999;}

Где:
width:70px;height:18px; - размеры кнопки;
bottom:30px;right:30px; - положение на странице;
background:url(http://likbezz.ru/_source/_img/2011/01/upbtt.png) - фоновая картинка кнопки.

...

Результат:

Скриншот:



☑ Тестовая страница ....
...
Прикрепления: 3446816.png (0.9 Kb) · 9632896.png (0.2 Kb)

 
Дата: Вторник, 10.01.2012, 18:01 |
neprostoy
Сержант
Группа: Пользователи
Сообщений: 35
Награды: 0
Репутация: 0
Статус: Offline


 спасибо, установил на свой сайт smile

 
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Как сделать появляющуюся / скрывающуюся ссылку «Наверх»? (Инструкция)
  • Страница 1 из 1
  • 1
Поиск:


Мобильная версия