Главная » Гаджеты » Интересные кнопки "вверх" для Блоггер

Интересные кнопки "вверх" для Блоггер

Доброго дня. Я уже писала о кнопках Вверх и Вверх/вниз. Но один читатель попросил написать ещё о кнопках.

У самого Блоггера такой функции не предусмотрено, поэтому коды нужно искать в интернете. Хочу отметить, что виджетов кнопки Вверх в интернете множество вариантов. Многие гаджеты можно переделать под свой вкус и дизайн своего блога. Нашла несколько интересных вариантов, которые выглядят необычно. Добавлять все предложенные коды кнопок нужно в Дизайн, Добавить гаджет, HTML/JavaScript.

Коды кнопки

Первая кнопка выглядит как полупрозрачная синяя полоса слева, появляется она, когда посетитель начинает прокручивать страницу.

Код:

<style>
.upbtn {
    z-index: 9999;
    width: 100px;
    height: 100%;
    color: #FFF;
    position: fixed;
    top:0;
    left:-100px;
    cursor: pointer;
    transition: all .7s ease-in-out;
    background-color: rgb(51, 122, 183, 0.5);
}
.upbtn:before {
    content: "ВВЕРХ";
    display:block;
    position:absolute; 
    text-align:center;
    color: #FFF;
    font-size:36px;
    line-height:100px;
    font-weight:bold;
    height:100%;
    vertical-align:center;
    writing-mode:tb-rl;
    transform: rotate(180deg);
}
.upbtn:after {
    content: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjMycHgiIHZpZXdCb3g9Ii0zOSAwIDM3NCAzNzQuMDAwNTkiIHdpZHRoPSIzMnB4Ij48cGF0aCBkPSJtMTI3IDI2OWg0MmM0LjQxNzk2OSAwIDgtMy41ODIwMzEgOC04di0xNTYuNjMyODEybDMyLjc0MjE4OCAzMC4zMzk4NDNjMy4yMzA0NjggMi45OTYwOTQgOC4yODEyNSAyLjgxMjUgMTEuMjg1MTU2LS40MTQwNjJsMjkuMTE3MTg3LTMxLjIyMjY1N2MxLjQ0OTIxOS0xLjU1NDY4NyAyLjIxODc1LTMuNjIxMDkzIDIuMTQ0NTMxLTUuNzQyMTg3LS4wNzQyMTgtMi4xMjEwOTQtLjk5MjE4Ny00LjEyNS0yLjU0Mjk2OC01LjU3NDIxOWwtOTYuMzM1OTM4LTg5LjYwOTM3NWMtMy4wNzAzMTItMi44NTkzNzUtNy44MjgxMjUtMi44NTkzNzUtMTAuOTAyMzQ0IDBsLTk2LjM1MTU2MiA4OS42MTMyODFjLTEuNTU4NTk0IDEuNDQ1MzEzLTIuNDcyNjU2IDMuNDUzMTI2LTIuNTQ2ODc1IDUuNTc4MTI2cy42OTkyMTkgNC4xOTE0MDYgMi4xNTIzNDQgNS43NDIxODdsMjkuMTk5MjE5IDMxLjIyNjU2M2MzLjAwNzgxMiAzLjIxNDg0MyA4LjA1MDc4MSAzLjM5NDUzMSAxMS4yODEyNS4zOTg0MzdsMzIuNzU3ODEyLTMwLjMzNTkzN3YxNTYuNjMyODEyYzAgNC40MTc5NjkgMy41ODIwMzEgOCA4IDh6bTAgMCIgZmlsbD0iI0ZGRkZGRiIvPjxwYXRoIGQ9Im04IDMxNmgyODBjNC40MTc5NjkgMCA4IDMuNTgyMDMxIDggOHY0MmMwIDQuNDE3OTY5LTMuNTgyMDMxIDgtOCA4aC0yODBjLTQuNDE3OTY5IDAtOC0zLjU4MjAzMS04LTh2LTQyYzAtNC40MTc5NjkgMy41ODIwMzEtOCA4LTh6bTAgMCIgZmlsbD0iI0ZGRkZGRiIvPjwvc3ZnPgo=);
    display:block;
    position:absolute; 
    top:calc(50% - 120px);
    width:100px;
    text-align:center;        
}
.upbtn:hover {
    background-color: rgb(51, 122, 183, 0.8);
} </style>
<script>
$('body').append('<div class="upbtn"></div>');            
$(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
        $('.upbtn').css({
            left: '0'
        });
        } else {
        $('.upbtn').css({
            left: '-100px'
        });
    }
});
$('.upbtn').on('click',function() {
    $('html, body').animate({
        scrollTop: 0
    }, 500);
    return false;
});</script>

Второй код — кнопка так же расположена слева, узкой полосой на всю страницу, но она не исчезает. На полосе установлены стрелки вверх и вниз. Когда станица расположена сверху, видна только кнопка Вниз. Полоса не мешает просмотру материала на сайте.

<div id="arrows_site">
  <div class="go-up" title="Вверх" id='ToTop'>⇑</div> /* можно поменять стрелку */
  <div class="go-down" title="Вниз" id='OnBottom'>⇓</div> /* можно поменять стрелку */
</div>
<style>
#arrows_site{
  position: fixed;
  width: 30px;
  background: #555;	/* меняем цвет текста */
  left: 0;
  top: 0;
  bottom: 0;
  height: 100%;		
}
 
.go-up, .go-down {
  display: none;
  position: fixed;
  left: 0;
  cursor: pointer;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px #000;
  opacity: .4;
  font-size: 30px;
  margin-bottom: 5px;
  width: 30px;
  height: 30px;
  transition: .4s;
}
.go-up { bottom: 50%; }
.go-down { bottom: 45%; }
.go-down:hover,
.go-up:hover {
  opacity: 1;    
}    
 </style>
<script>
if ($(window).scrollTop() >= 150) $("#ToTop").fadeIn(800);
  $(window).scroll(function(){
      if ($(window).scrollTop() <= 150) $("#ToTop").fadeOut(800);
      else $("#ToTop").fadeIn(800);
  });
 
  if ($(window).scrollTop() <= $(document).height()) $("#OnBottom").fadeIn(800);
  $(window).scroll(function(){
      if ($(window).scrollTop() >= $(document).height()) $("#OnBottom").fadeOut(800);
      else $("#OnBottom").fadeIn(800);
  });
 
  $("#ToTop").click(function(){$("html,body").animate({scrollTop:0}, 800)});
  $("#OnBottom").click(function(){$("html,body").animate({scrollTop:$(document).height()}, 800)});
</script>

В строке background: #555;, можно поменять цвет полосы. Символы стрелок так же можно заменить. Например:

▲ ▼

↑ ↓

⇧ ⇩

Третий код — кнопка с надписью Вверх появляется при прокрутке вниз, ближе к середине страницы. Необычное в ней то, что при наведении курсора она меняет цвет.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> /* если у вас уже в шаблоне подключена библиотека jQuery, то эту строчку можно удалить полность*/ 
<script>
jQuery(document).ready(function() {
var offset = 300;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.backtotop').fadeIn(duration);
} else {
jQuery('.backtotop').fadeOut(duration);
}
});

jQuery('.backtotop').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<a href="#" class="backtotop">Вверх</a>
<style>
.backtotop {
position: fixed;
bottom: 10px; 
right: 0px; 
color: #000000; /* цвет текста */
background-color: #b4a3e0; /* цвет кнопки */ 
font-size: 12px; /* размер шрифта */ 
padding: 10px; 
text-transform: uppercase;  
letter-spacing: 1.0px; 
}

.backtotop:hover {
background-color: #8f64ff; /* цвет кнопки при наведении курсора */
color: #ffffff; /* цвет текста при наведении курсора */
text-decoration: none; 
}
</style>

Все пояснения в кодах можно удалить от /* до */. Можно поставить код с ними, пояснения не будут видны.

Ваши комментарии:

Комментарии со спамом удаляются.