Волнения в виде негодований

Наверх

29 января 2012, 16:59

Сделал в своём блоге кнопку «наверх». На мой взгляд это очень важный функционал не только любого блога, но и любого сайта, который имеет какую-либо прокрутку. Разумеется, она появляется только когда пользователь не наверху. Мелкое, но стоящее нововведение, я считаю. Зачем я это сделал, каким образом, как оформил и где это стоит сделать — всё под катом.

Зачем?

Я перечислю четыре «бесит»: На многих сайтах, особенно в блогах, когда я дочитываю статью и мне действительно интересно её содержание (например, код, который я хочу скопировать себе), мне вручную приходится пролистывать её вверх. Это ужасно долго и неудобно, а потому бесит. Некоторые ради такого случая в подвале блога ставят ссылку на верх страницы. Иногда эта ссылка требуется до того, как пролистаешь в самый низ. Например, находясь на середине статьи. Снова оказываешься в непонятной ситуации. Хочется щёлкнуть куда-нибудь, чтобы попасть вверх, но щёлкнуть некуда. Это бесит. Некоторые ради удобства своих пользователей действительно добавляют эту кнопочку. Даже делают, чтоб она появлялась после того, как немного прокрутишь вниз. Но где она, эта кнопочка? Она на столько маленькая, что её просто не видно. Она в верхнем правом или в нижнем правом углу. При этом справа часто находится меню. Размер и расположение этой мелкой кнопочки меня бесит. Есть два варианта прокрутки к верху: мгновенно или плавно. Во-первых, я вообще люблю плавность, а во-вторых, когда вся статья проскакивает мгновенно, я не понимаю, что пролистал, не пролистываю её и взглядом. Некоторым не нравится, что прокручивается медленно, но скорость же можно отрегулировать. Тут, конечно, каждому самостоятельно судить, но на мой взгляд это плохо. Меня это бесит. Что же меня не бесит, спросите вы? Огромная кнопка, тыкая в которую невозможно промахнуться. В которую не нужно прицеливаться. Просто дёргаешь курсор в её второну и щёлкаешь без разбора. Но при этом она должна не мешать чтению и восприятию остальной информации. Единственный сайт, где я видел реализацию подобного — злостная социальная сеть в контакте. Вот оттуда я и слизал решение. Сделал немного иначе, попроще, но работает примерно одинаково.

Как?

Если вкратце: написал и установил маленький скрипт скролла, оформил ссылку и всё на этом. По этой ссылке сокращённая версия скрипта. ## Установка Как работает скрипт мы разобрали, осталось установить. Можете скачать себе и вызывать со своего адреса, а можете вызывать его каждый раз с моего сайта по ссылке, указанной выше. Если вы скачали его себе, поместите его в каталог user/js/ своего блога и установите, указав в файле user/extras/footer-post.tmpk.php следующее:
<? _JS('scroll.min'); ?>
Таким образом скрипт будет вызываться из  сайта. На мой взгляд лучше он будет загружаться после странички, так что я вызываю его обычным методом:
<script scr="user/js/scroll.min.js"></script>
Так как скрипт добавляет саму ссылку «наверх» в html, то дописывать там ничего не нужно. Далее оформим ссылку:
#move_up { 
	position: fixed; 
	top: 0; 
	display: none;
	width: 100px; 
	height: 90%;
	text-decoration: none; 
	color: #45688E; 
	background: transparent; 
	padding: 12px 35px;
	opacity:.3;
	font-family: tahoma, arial, verdana, sans-serif, Lucida Sans;
	font-weight: bold;
	font-size: 11px;
	text-shadow: 0 1px 0 white;
	-webkit-transition:color, background, opacity .2s;
	-moz-transition:color, background, opacity .2s;
	-o-transition:color, background, opacity .2s;
	-ms-transition:color, background, opacity .2s;
	transition:color, background, opacity .2s;
} 
#move_up:hover { 
	color: #45688E; 
	background: #e1e7ed;
	opacity:1;
}

#move_up:before {
	content:"";
	float:left;
	position:absolute;
	top:15px;
	left:15px;
	width:0;
	height:0;
	border-color:transparent transparent #45688E transparent;
	border-style:solid;
	border-width: 0 7px 8px 7px;
	box-shadow: 0 1px #fff;	
}
Здесь в css не обойдётся без «модного». В частности css3-свойство transition, добавляющее анимацию при наведении, и псевдокласс :before, который добавляет стрелочку вверх. Можно, конечно, обойтись и без стрелочки и без анимации, а можно реализовать стрелочку картинкой, а анимацию с помощью jQuery, но я выбрал такой способ. Для установки подобной кнопки блог обязательно должен быть не на всю ширину странички. Нужно, чтоб кнопка «наверх» не перекрывала часть текста. Она должна быть в стороне. Я установил для всего блога внешние отступы (margin) в 100 пикселей.

Где стоит это делать?

Не забывайте, что это применимо вообще к любому сайту, не только к блогу на эгее! Но прежде всё равно стоит думать. Если на сайте вообще не планируется прокрутки, то и скрипта этого не надо. Ну, такие вещи и дураку понятны, так что на этом сей вопрос закроем. На этом установка заканчивается, начинается применение, тестирование, попытки изменить под себя, комментарии, критика, мнения и советы ;-)
Популярное