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


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

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

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

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

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

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

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


jquery/1.4.3/jquery.min.js">



$(document).ready(function(){

// hide #back-top first
$("#back-top").hide();

// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});

// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});

});

Стиль 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):

26.05.2011

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s