Случвало ли ви се е да попаднете на сайт, дължината на метериалите в който е такава, че се налага доста да скролирате, за да се върнете отново в началото на страницата? А на сайтове, при които материалите са толкова много, че дори съкращаването на публикациите до анонси, пак не решава проблема със скролирането обратно към началото? И да не сте, работата е там, че вашият сайт, в зависимост от неговата насоченост и вашата активност, с течение на времето, все повече ще заприличва на тези сайтове, при които това скролиране нагоре към менютата може да откаже посетителя не само да продължи обиколката си из него, но дори да продължи да го посещава.
За тези от вас, които не искат да се сблъскват с този проблем и биха искали сайтът им да стане малко по-потребителски ориентиран (user friendly), ше разкрия едно просто и същевременно елегантно решение на въпроса - добавяне на постоянно видим бутон за връщане в началото на страницата.
Решението е просто, защото се постига с поставянето на малко код било в HTML/Text джаджа, било в HTML кода на сайта ви. А е елегантно не само защото бутонът стои постоянно, но ненатрапващо се в избрана от вас позиция на екрана, предоставяйки на посетителите ви възможността във всеки един момент да се върнат отново в началото на страницата, но и защото позволява да бъде персонализиран изцяло по ваш вкус и дизайн.
Какво ви трябва!
Най-напред изображението, което искате да ползвате за бутон. Ето ви едно примерно такова: 
. Вие, разбира се, можете да използвате всяко друго, което си изберете. След това, поставете кода по-долу във HTML/Text джаджа или направо в HTML кода на сайта ви, къде да е между <body> и </body> маркерите.
. Вие, разбира се, можете да използвате всяко друго, което си изберете. След това, поставете кода по-долу във HTML/Text джаджа или направо в HTML кода на сайта ви, къде да е между <body> и </body> маркерите.<a style="display:scroll;position:fixed;top:10px;right:10px;" href="#" title="В началото"><img src="http://4.bp.blogspot.com/_4Vda7CqRvmU/SQOHOVnJZyI/AAAAAAAAAE4/3F3uphpLZKY/s320-R/na4alo.gif"/></a>
Ако използвате кода в непроменен вид, ще имате като резултат ето това. За да го персонализирате, преди да запазите промените и да се порадвате на новата придобивка за вашия сайт и посетители, можете да промените в него онова, което сметнете за нужно, съгласно поясненията по-долу.
img src="" <-- Поставете между кавичките Интернет адреса на изображението ви за бутон
title="" <-- Въведете текста, който да се появява при позициониране на мишката над бутона
position: fixed; <-- Фиксиране на изображението в страницата
top: 10px; <-- Вертикална позиция в страницата и отстояние от края
right: 10px;" <-- Хоризонтална позиция в страницата и отстояние от края
Оставям откриването на възможните позиции на бутона за връщане в началото на страницата, различни от "горе" и "вдясно", на вашата инициативност и ще се радвам да чуя отзивите ви за този трик.
Ако информацията ви е била полезна, подкрепете ме!
Ако информацията ви е била полезна, подкрепете ме!
RSS, XML, e-mail абонамент 
Направи си сайт! по e-mail
1 коментара:
Проблема при този трик е, че при различните резолюции на екрана, мястото на бутона се изменя, тъй като положението му се определя спрямо страните на екрана, а не спрямо съдържанието на блога.
Аз например съм с резолюция 1024х768 и като настроя бутона и още един банер направен със същия код да ми излизат точно до съдържанието на блога, когато отворя блога с по-голяма резолюция на екрана, бутона и банера се отдалечават от блога ми. Ето снимки:
При резолюция 1024х768 и както трябва да стои:
http://i50.tinypic.com/34q7iw2.jpg
При по-голяма резолюция и както НЕ трябва да стои:
http://i49.tinypic.com/2v1n4ia.jpg
Цял ден "убих" да търся начин да позиционирам бутоните спрямо съдържанието на блога ми вместо спрямо страните на екрана, за да изглеждат еднакво при всяка резолюция, но открих само това:
http://stackoverflow.com/questions/10573274/back-to-top-button-change-fixed-position-based-on-resolution
Тъй като обаче не съм на ти с програмирането не знам как точно да го направя в моя случай, затова реших да попитам тук. Има ли някакъв начин бутона за връщане в началото да се позиционира спрямо съдържанието на блога и да изглежда еднакво при всяка резолюция?
Публикуване на коментар
Моля, имайте предвид, че коментарът ви ще бъде одобрен само ако пишете на кирилица. Можете да използвате някои HTML оператори, например <b>, <i>, <a>.
Благодаря ви!