Кнопка Наверх страницы (Scroll to top)

Правильная кнопка (обычно делается в виде стрелки).


Работает на jQuery, так что понадобится подключить в блог эту библиотеку.

Далее в /head прописать следующий скрипт (его даже можно вынести на хостинг):

<style type="text/css">
#w2btoTop {display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:89px;height:140px;border:none;text-indent:-999px;background:url(http://2.bp.blogspot.com/-mHqnd03atLU/Tf92esR2s_I/AAAAAAAAFjY/cUQ90G6P_FQ/s320/naverh1.gif) no-repeat left top;}
#w2btoTopHover {background:url(http://2.bp.blogspot.com/-mHqnd03atLU/Tf92esR2s_I/AAAAAAAAFjY/cUQ90G6P_FQ/s320/naverh1.gif) no-repeat left -51px;width:89px;height:140px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);}
#w2btoTop:active, #w2btoTop:focus {outline:none;}
</style>
<script src="http://bloggerblogwidgets.googlecode.com/files/w2b_jquery.ui.totop.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){ $().UItoTop({ easingType: 'easeOutCubic' }); });
</script>

Уточнение:
Cсылки https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGmDuWk4CGJzOoH3BElyCUttk5nXdIDP5BcneLGwXgg90Oa7FuqytZ2NL6G_KDwnvHDxX-2gqK0g5U3KvMTiWA2iGrBzbkluuqZSG6LGUf5wZ1S-1dL6sOaXx8hXmRuODUojFfOlzegNdj/s320/naverh1.gif - это рисунок кнопки (нормально и при наведении), поставьте свою.
width:89px;height:140px - размер кнопки (аналогично).
В #w2btoTopHover прописан небольшой сдвиг.

Комментариев нет:

Отправить комментарий