Скрипт кнопки вверх / вниз с плавной прокруткой
Если у вас на сайте имеются страницы с большим количеством контента, вам наверняка будет интересно данное решение для сайта, позволяющее посетителю попадать вниз и вверх страницы одним нажатием кнопки. К тому же установить эти кнопки на сайт okis очень просто.
1. Для начала подключаем библиотеку jQuery:
Для этого копируем и вставляем следующий код в раздел Настройки > SEO > Поле для Мета тегов. Тем самым он оказывается между тегов HEAD нашего шаблона.
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
2. Подключаем скрипт кнопок:
Данный код отвечает за плавную прокрутку страницы и эффекты появления и исчезания кнопок. Копируем его и вставляем его в раздел предназначенный для размещения счетчиков (Настройки > Статистика > Другой счетчик посещаемости ). Это позволит нам разместить его как можно ближе к закрывающему тегу BODY.
<script type="text/javascript">
jQuery(function(){
$("#Go_Top").hide().removeAttr("href");
if ($(window).scrollTop()>="250") $("#Go_Top").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()<="250") $("#Go_Top").fadeOut("slow")
else $("#Go_Top").fadeIn("slow")
});
$("#Go_Bottom").hide().removeAttr("href");
if ($(window).scrollTop()<=$(document).height()-"999") $("#Go_Bottom").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()>=$(document).height()-"999") $("#Go_Bottom").fadeOut("slow")
else $("#Go_Bottom").fadeIn("slow")
});
$("#Go_Top").click(function(){
$("html, body").animate({scrollTop:0},"slow")
})
$("#Go_Bottom").click(function(){
$("html, body").animate({scrollTop:$(document).height()},"slow")
})
});
</script>
3. Устанавливаем код кнопок:
Кнопки устанавливаем туда же, в раздел для размещения счетчиков. При желание вы можете заменить в этом коде изображения на свои, более подходящие к стилю оформления вашего сайта.
<a style='position: fixed; bottom: 80px; right: 10px; cursor:pointer; display:none;'
href='#' id='Go_Top'>
<img src="http://pro-okis.ru/img/pro-okis_ru/nav_up.png" alt="Наверх" title="Наверх">
</a>
<a style='position: fixed; bottom: 20px; right: 10px; cursor:pointer; display:none;'
href='#' id='Go_Bottom'>
<img src="http://pro-okis.ru/img/pro-okis_ru/nav_down.png" alt="Вниз" title="Вниз">
</a>
|
Поставить к себе на сайт |
Создано на конструкторе сайтов Okis при поддержке Flexsmm - накрутка тикток