Кнопка на JQuery вверх для блога



Приветствую вас снова уважаемые  читатели, в этой краткой статье мы рассмотрим возможность установки на нашем блоге кнопки "Scroll to top" или Вверх если перевести, она нам необходима для того чтоб наш читатель смог быстро подняться в вверх если он прокрутил длинную статью до конца и как то не приятно когда нужно прокручивать всю статью обратно вверх, по этому мы облегчим ему процесс возврата с ног до головы так скажем.Установка скрипта не сложная, вот сам скрипт:

<!-- Начало Скрипта -->
<style type="text/css">
#w2b-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE', EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px; cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type='text/javascript'>
$(function() {
$.fn.scrollToTop = function() {
$(this).hide().removeAttr("href");
if ($(window).scrollTop() != "0") {
$(this).fadeIn("slow")
}
var scrollDiv = $(this);
$(window).scroll(function() {
if ($(window).scrollTop() == "0") {
$(scrollDiv).fadeOut("slow")
} else {
$(scrollDiv).fadeIn("slow")
}
});
$(this).click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow")
})
}
});
$(function() {
$("#w2b-StoTop").scrollToTop();
});
</script>
<a href='#' id='w2b-StoTop' style='display:none;'>Вверх</a>
<!-- Конец Скрипта -->

Скрипт нужно установить сразу перед тегом </body> для этого заходим в панель блогера Настройки - Изменить HTML и ишим в коде (Ctrl + F) тег </body> и вставляем внимание не после него а перед ним.


Вы наверняка заметили что в конце есть ссылка Вверх "<a href='#' id='w2b-StoTop' style='display:none;'>Вверх</a>"

 ее вы можете легко оформить под себя изменив данное слово или я предложу более приемлемыи вариант, пусти это будет картинка индикатор вверх.Для того что у нас не отображался просто текст а красивая картинка индикатор вверх вставляем вместо слова вверх тег:

<img src="http://cdn1.iconfinder.com/data/icons/super-mono-reflection/green/navigation-up-button_green.png"/>

 и эфект будет более замеченным для вашего читателя.Также есть один важный момент, если вы имеете свой картинки или вам не нравится картинка что я то можете ее сменить на свое усмотрение придворително загрузив ее на холстинге,  не забываем про стили которые я подчеркнул зеленым цветом, их можете менять на свое усмотрение .Спасибо за внимание и следите за новинками, интересное следует.Если есть вопросы или предложения пишите отзыв внизу страницы или оставьте комментарий.


Также я привожу пару картинок индикаторы вверх для разнообразия и соответственные ссылки на них чтоб вы смогли установить вместо стандартной строки вверрх:


arrow, orange, orb, up icon 
http://cdn1.iconfinder.com/data/icons/orb/128/9.png

arrow, sans, up icon
http://cdn2.iconfinder.com/data/icons/picol-vector/32/arrow_sans_up-128.png

arrow, up, upload icon
http://cdn1.iconfinder.com/data/icons/ose/Arrow%20Up.png

up icon
http://cdn1.iconfinder.com/data/icons/bnw/64x64/actions/up.png

top, up icon
http://cdn1.iconfinder.com/data/icons/glaze/48x48/actions/top.png

button, navigation, sticker, up icon
http://cdn1.iconfinder.com/data/icons/super-mono-sticker/icons/navigation-up-button_sticker.png


*Картинки индикаторы скопированы с сайта iconfinder.com

1 Коментариев к “Кнопка на JQuery вверх для блога ”

nassermabray комментирует...
04.03.2022, 10:26

Casinos near me - Dr.MCD
I'm looking for new casino near you. We're open 용인 출장샵 and excited 전라북도 출장마사지 to welcome you back to the future! Stay 부천 출장샵 informed about Casino's 전주 출장마사지 online 문경 출장마사지 casino's live casino,


Отправить комментарий

Все права зашищены Nick - Templates | Blogger Template by Bloggermint