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) - фоновая картинка кнопки.
...
Результат:
Скриншот:
☑ Тестовая страница ....
...
