Бутон за бързо връщане в началото на страницата(back to top)

Случвало ли ви се е да попаднете на сайт, дължината на метериалите в който е такава, че се налага доста да скролирате, за да се върнете отново в началото на страницата?
За тези от вас, които не искат да се сблъскват с този проблем и биха искали сайтът им да стане малко по-потребителски ориентиран (user friendly), ще разкрия едно просто и същевременно елегантно решение на въпроса - добавяне на постоянно видим бутон за връщане в началото на страницата.

Решението е просто, защото се постига с поставянето на малко код било в HTML/Text джаджа, било в HTML кода на сайта ви. А е елегантно не само защото бутонът стои постоянно, но ненатрапващо се в избрана от вас позиция на екрана, предоставяйки на посетителите ви възможността във всеки един момент да се върнат отново в началото на страницата, но и защото позволява да бъде персонализиран изцяло по ваш вкус и дизайн.

Какво ви трябва!
Най-напред изображението, което искате да ползвате за бутон. Ето ви едно примерно такова: [You must be registered and logged in to see this image.]. Вие, разбира се, можете да използвате всяко друго, което си изберете. След това, поставете кода по-долу във HTML/Text джаджа или направо в HTML кода на сайта ви, къде да е между <body> и </body> маркерите.

Код:: <a style="display:scroll;position:fixed;top:10px;right:10px;" href="#" title="В началото"><img src="https://i97.servimg.com/u/f97/16/34/78/03/na4alo11.png"/></a>

За да го персонализирате, преди да запазите промените и да се порадвате на новата придобивка за вашия сайт и посетители, можете да промените в него онова, което сметнете за нужно, съгласно поясненията по-долу.

Вариант 1

Код:: img src="" <-- Поставете между кавичките Интернет адреса на изображението ви за бутон
title="" <-- Въведете текста, който да се появява при позициониране на мишката над бутона
position: fixed; <-- Фиксиране на изображението в страницата
top: 10px; <-- Вертикална позиция в страницата и отстояние от края
right: 10px;" <-- Хоризонтална позиция в страницата и отстояние от края

Вариант 2

Код:: ///hotrofm up top style xenforo///
$(document).ready(function(){
   $('body').append('<style type="text/css">#bttop {background-image: url(http://i97.servimg.com/u/f97/16/34/78/03/t10.png);background-size: 38px;bottom:10px;cursor:pointer;font-weight:bold;height:38px;line-height:38px;opacity:1;position:fixed;right:5%;text-align:center;text-decoration:none;-webkit-border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;border-radius:5px;transition:all 0.3s ease-in-out 0s;width:38px;z-index:1000;}</style><div id="bttop"><i class="fa fa-angle-double-up fa-2x"></i></div>');
   $(window).scroll(function() {
   if ($(this).scrollTop() != 0) {
   $('#bttop').fadeIn();
   } else {
   $('#bttop').fadeOut();
   }
   });
   $('#bttop').click(function() {
   $('body,html').animate({
   scrollTop: 0
   }, 800);
   });
});

Вариант 3

Код:: <a href="#top" style="padding:2px 4px;font-weight:bold;font-size:24px;background:#10245d;color:#ececec;position:fixed;bottom:1%;right:2%;border-radius:2px" title="Return to the top">^</a>

Вариант 4

Код:: <a href="#top" style="width: 17px;height: 20px;padding:5px;background:#10245d;position:fixed;bottom:40px;right:2%;border-radius:2px;" title="Return to the top"><img src="http://i97.servimg.com/u/f97/16/34/78/03/21311.png" style="width: 20px;"/></a>
<a href="#page-footer" style="width: 17px;height: 20px;padding:5px;background:#10245d;position:fixed;bottom:5px;right:2%;border-radius:2px;" title="Return to the top"><img src="http://i97.servimg.com/u/f97/16/34/78/03/11310.png" style="width: 20px;"/></a>

Вариант 5

Съшия като по горния само,че с по забавено скролиране.

Код:: <div class="go-to-top" style="width:20px;height:20px;padding:5px;background:#10245d;position:fixed;bottom:40px;right:1.5%;border-radius:2px;cursor:pointer;" title="Return to the top"><img src="http://i97.servimg.com/u/f97/16/34/78/03/21311.png" style="width: 20px;"/></div>
<div class="go-to-bottom" style="width:20px;height:20px;padding:5px;background:#10245d;position:fixed;bottom:5px;right:1.5%;border-radius:2px;cursor:pointer;" title="Return to the bottom"><img src="http://i97.servimg.com/u/f97/16/34/78/03/11310.png" style="width: 20px;"/></div>
<script>$(document).ready(function(){ $('.go-to-top').click(function(){$('html, body').animate({scrollTop : 0},1200);return false;}); $('.go-to-bottom').click(function(){$('html, body').animate({scrollTop: document.body.scrollHeight},1200);return false;});});</script>

» Как да добавим бутон благодаря във форума ни
» Какъв е кода при добавянето на коментар, страницата да не се презарежда?
» Ето как да изтриете присъствието си в интернет с един бутон
» Идеи за развитие на FB страницата
» При писане на пост вече не се презарежда страницата.