Суббота , Август 19 2017

Кнопка вверх (JQuery плагин scroll to top)

Привет! «Scroll to Top» кнопка — дополнение для блога с большим количеством контента и с длинными сообщениями. Кнопка вверх — у меня уже были сообщения на эту тему. В этом посте вы найдете несколько стилей кнопки вверх, которые позволят Вашим посетителям гладко прокручивать на начало страницы, делая ваш блог более удобный для ваших читателей. Теперь вам представляется возможность выбрать кнопку вверх (Back To Top) на свой вкус, чтобы она сочеталась с дизайном вашего блога. Плюс к этому, кнопку вверх можно настраивать: увеличить или уменьшить размер окна,изменить ширину рамки, цвет текста и многое другое.

Как добавить кнопку вверх(Back To Top)(JQuery plagin scroll to top) в блог?

И так, как обычно идём Дизайн —> Изменить HTML с помощью сочетания клавиш (Ctrl+F) находим строчку ]]></b:skin> и перед ней вставляем такой код:

#backtotop { padding:5px; position:fixed; bottom:10px;right:10px; cursor:pointer;

}

Дальше ищем </body> и до него добавить следующий код:

<a href=»#» id=»backtotop»><img src=»Url адрес изображения кнопки» alt=»back to top» /></a>

Теперь самый трудный шаг, это выбрать картинку кнопки вверх:

Выбрав картинку,загружаете её на свой хостинг.URL адрес изображения теперь вставляете в код выше,выделено синим.Следующее действие находим код:

]]></b:skin> и перед ним добавить этот код:

#backtotop { width:100px; /* Change Box Width*/ background:#F4FFBF; /* Change background color*/ border:1px solid #ccc; /* Change Border Style*/ text-align:center; padding:5px; position:fixed; bottom:10px;right:10px; cursor:pointer; color:#666; /* Change text color*/ text-decoration:none;

}

Теперь если хотите сразу можно настроить:

• width:100px; /* Change Box Width*/—ниже или выше число, чтобы увеличить или уменьшить размер окна,

• background:#F4FFBF; /* Change background color*/—код цвета фона,

• border:1px solid #ccc; /* Change Border Style*/—код цвета границы,

• color:#666; /* Change text color*/—код цвета текста,

• 1px—изменить ширину рамки.

Примечание: Вы можете получить любые цветовые коды с помощью генератора цвета здесь.

Теперь ещё немного и мы у цели.Найдите код: </body> перед ним,вставьте следующий код:

<a href=»#» id=»backtotop»>Back to top</a>

Можете изменить текст Back to top на свой.Всё теперь последний шаг.Найти следующий код:

<head> и вставьте нижний код после <head> :

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js’ type=’text/javascript’></script>

<script language=»javascript»>

$(window).ready(function(){

$(‘#backtotop’).click(function(e){ e.preventDefault();

$(‘html, body’).animate({scrollTop:0}, ‘slow’);

});

});

</script>

Всё.Нажмите на кнопку просмотр и если всё в норме сохраните шаблон.Теперь у Вас есть кнопка вверх JQuery плагин scroll to top.Действий много,зато кнопки под свой дизайн шаблона можно настроить.До новых встреч.Пока.

Взято: allblogtools.com

Может Вам понравится эффект цветной радуги для ссылок или показ виджетов/гаджетов на определённых страницах блога.

Смотрите также

Скачать Freemake Software Collection

Freemake Software Collection – эта программа которая поможет вам конвертировать почти что любой видео формат. …

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *