Как сделать ссылку к началу страницы (ссылку "Наверх") Blogger

http://shpargalkablog.ru/2011/05/kak-sdelat-ssylku-k-nachalu-stranitsy.html#more
[Вы наверно заметили, что я не публикую отдельные страницы под небольшие статьи, а редактирую более поздние записи, содержа их в актуальном состоянии - соблюдаю рекомендацию Гугла. Эти несколько строк позволяют вас проинформировать об изменениях на блоге. Их я в течении нескольких дней удаляю.]

Чтобы пользователь дойдя до конца страницы не уходил с сайта применяют несколько уловок, например, размещают блок с похожими статьями или ссылку "Наверх", где находятся главное меню. Как её сделать? Не будем устанавливать якоря, а просто воспользуемся конструкцией

Наверх

Пример: Наверх.

Её мы можем расположить в меню под статьёй или сделать "плавающей". То есть она будет перемещаться вместе с прокруткой страницы в правом нижнем углу (обратите внимание на пример):Наверх 1

Наверх 1

Кнопка к началу страницы с использованием jQuery.

Если уж применять скрипты, то нужно это сделать красиво. Как, например, сделали на webdesignerwall.com. Его образец мы видим слева.

Перед размещаем скрипт:

Стиль CSS (для Blogger перед ]]>):

#back-top {
 position: fixed;
 margin-left: -100px;
 bottom: 0px;}

#back-top a {
 width: 70px;
 display: block;
 text-align: center;
 font: 11px/100% Arial, Helvetica, sans-serif;
 text-transform: uppercase;
 text-decoration: none;
 color: #bbb;
 -webkit-transition: 1s;
 -moz-transition: 1s;
 transition: 1s;
}

#back-top a:hover {
 color: #000;
}

#back-top span {
 width: 70px;
 height: 70px;
 display: block;
 margin-bottom: 7px;
 background: #ddcca3 url(http://www.mundodarkness.com.br/gd/topo.png) no-repeat center center;
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 15px;
 -webkit-transition: 1s;
 -moz-transition: 1s;
 transition: 1s;
}

#back-top a:hover span {
 background-color: #777;
}

HTML код (для Blogger в гаджете HTML/JavaScript):

Наверх

Автор:NMitra

26.05.2011