smurfa_vr HL-BG Community
Брой мнения : 8113 Дата на регистрация : 31.03.2011 Местожителство : Враца
| Заглавие: Бутон за бързо връщане в началото на страницата(back to top) Сря 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> За да го персонализирате, преди да запазите промените и да се порадвате на новата придобивка за вашия сайт и посетители, можете да промените в него онова, което сметнете за нужно, съгласно поясненията по-долу. Вариант 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> |
|