BG-HALF LIFE

BG-HALF LIFE

Българският Half Life портал
 
PortalPortal  ИндексИндекс  Въпроси/ОтговориВъпроси/Отговори  Регистрирайте сеРегистрирайте се  ВходВход  
*BG-SMURFA-VRATSA* ви пожелава приятна игра в сървърите ни :)
CSPORTAL-BG.IN # Army Ranks+Respawn
Визита от други Държави
Flag Counter

Share| .

Бутон за бързо връщане в началото на страницата

Предишната тема Следващата тема Go down
АвторСъобщение
smurfa_vr
HL-BG Community
HL-BG Community


Брой мнения : 4755
Дата на регистрация : 31.03.2011
Местожителство : Враца

ПисанеЗаглавие: Бутон за бързо връщане в началото на страницата Сря 12 Окт 2016, 22:18

Случвало ли ви се е да попаднете на сайт, дължината на метериалите в който е такава, че се налага доста да скролирате, за да се върнете отново в началото на страницата?
За тези от вас, които не искат да се сблъскват с този проблем и биха искали сайтът им да стане малко по-потребителски ориентиран (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>

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

Код:
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>

__________________________________________________________________________
[You must be registered and logged in to see this image.]
[You must be registered and logged in to see this image.]
Върнете се в началото Go down
http://smurfa.bulgarianforum.net https://www.facebook.com//smurfavratsa
Бутон за бързо връщане в началото на страницата
Предишната тема Следващата тема Върнете се в началото
Страница 1 от 1

Permissions in this forum:Не Можете да отговаряте на темите
BG-HALF LIFE :: Програмиране и Дизайн-