Демо страница со скриптами
КНОПКА НАВЕРХ СКРИПТ
Простая кнопка Наверх, появляется при прокрутке немного вниз. Сделано на простом Js.
<a href="#" id="scrollToTop" class="scrollToTop">Scroll</a>
<script>
document.addEventListener("scroll", function() {
var button = document.getElementById("scrollToTop");
if (document.documentElement.scrollTop > 100) {
button.style.display = "block"; // Показываем кнопку
} else {
button.style.display = "none"; // Скрываем кнопку
}
});
function scrollToTop() {
const duration = 500; // Длительность анимации в миллисекундах
const start = window.scrollY;
const startTime = performance.now();
function animateScroll(currentTime) {
const elapsedTime = currentTime - startTime;
const progress = Math.min(elapsedTime / duration, 1); // Нормируем прогресс
// Прокручиваем на основе прогресса
window.scrollTo(0, start * (1 - progress));
if (progress < 1) {
requestAnimationFrame(animateScroll); // Запрашиваем следующий кадр
}
}
requestAnimationFrame(animateScroll); // Начинаем анимацию
}
document.getElementById("scrollToTop").addEventListener("click", function(event) {
event.preventDefault();
scrollToTop();
});
</script>/* scroll up CSS begin */
.scrollup{
width:100px;
height:100px;
opacity:1;
position:fixed;
bottom:22px;
left:20px;
display:none;
text-indent:-9999px;
background: url(/uploads/scrollup.webp) no-repeat left top;
z-index: 9001;
border-radius: 50%;
}
@media only screen and (max-width: 840px) {
.scrollup {
width: 100px;
height: 100px;
border-radius: 50%;
bottom: 16px;
left: 2%;
}
}
/* scroll up CSS end */БЛОК С УВЕДОМЛЕНИЕМ О COOKIES СКРИПТ
Простой блок с куки уведомлением, кнопкой ОК.
<!-- START Cookie-Alert -->
<div id="cookie_note">
<p>Мы используем файлы cookies для улучшения работы сайта. Оставаясь на нашем сайте, вы соглашаетесь с условиями
использования файлов cookies. Чтобы ознакомиться с нашими Положениями о конфиденциальности, сборе персональных данных и об использовании
файлов cookie, <a href="/policy.html" target="_blank">нажмите здесь</a>.</p>
<button class="button cookie_accept btn btn-primary btn-sm">Я согласен</button>
</div>
<script>
function setCookie(name, value, days) {
let expires = "";
if (days) {
let date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
let matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
return matches ? decodeURIComponent(matches[1]) : undefined;
}
function checkCookies() {
let cookieNote = document.getElementById('cookie_note');
let cookieBtnAccept = cookieNote.querySelector('.cookie_accept');
// Если куки cookies_policy нет или она просрочена, то показываем уведомление
if (!getCookie('cookies_policy')) {
cookieNote.classList.add('show');
}
// При клике на кнопку устанавливаем куку cookies_policy на один год
cookieBtnAccept.addEventListener('click', function () {
setCookie('cookies_policy', 'true', 365);
cookieNote.classList.remove('show');
});
}
checkCookies();
</script>
<!-- END Cookie-Alert -->
CSS
#cookie_note{
display: none;position: fixed;z-index:100;
bottom: 15px;left: 50%; max-width: 90%;transform: translateX(-50%);
padding: 20px;background-color: white;
border-radius: 4px;box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.4);
}
#cookie_note p{margin: 0;font-size: 0.7rem;text-align: left;color: black;}
#cookie_note .btn-sm {display: block;margin: 0 auto;}
.cookie_accept{width:20%;}
@media (min-width: 576px){#cookie_note.show{display: flex;}}
@media (max-width: 575px){#cookie_note.show{display: none;text-align: left;}}Источник: https://tretyakov.net/post/preduprezhdenie-o-cookie-dlya-sajta-na-javascript/
МОРГАЮЩАЯ КНОПКА ПОЗВОНИТЬ СКРИПТ
На мобильном при клике на кнопку - переход на ваш телефон. На десктопе при клике - переход на любую страницу, либо форму обратного звонка, но можно сделать и появляющееся модальное окно с формой, если оно у вас есть.
<div class="callback-widget-desc" data-event="jqm" data-param-id="15" data-name="callback">
<a href="/index.php?do=feedback" title="Форма обратной связи"><img src="/uploads/telefon-2.webp" class="phonewebp" alt="Форма обратной связи"/></a>
</div>
<div class="callback-widget-mob">
<a href="tel:+79800005665" title="Телефон"><img src="/uploads/telefon-2.webp" class="phonewebp" alt="Позвонить"/></a>
</div>
****************
CSS
.callback-widget-desc {
display:block;
width:70px;
height:70px;
background-image: url(/webpimg/telefon.webp);
background-size:cover;
position:fixed;
bottom:60%;
right:30px;
border-radius: 50%;
cursor:pointer;
-webkit-animation-name: 'play_down';
-moz-animation-name: 'play_up';
animation-duration: 1.5s;
animation-iteration-count: infinite;
box-shadow: 0 0 0 3px rgba(22, 160, 133,.5);}
#content > div.callback-widget-desc > span > i, body > div.body > div.main.banner-AUTO > div.callback-widget-desc > span > i {height: 70px;width: 70px;line-height: 55px;padding-top:7px;font-size: 45px!important;}
#content > div.callback-widget-desc > span, div.main.banner-AUTO > div.callback-widget-desc > span {font-size: 45px!important;}
.callback-widget-mob {display:none;}
.phonewebp {width:70px;height:70px;margin:0!important;}
@keyframes play_up { 0%
{
-webkit-box-shadow: 0 0 rgba(22,160,133,.6);
-moz-box-shadow: 0 0 rgba(22,160,133,.6);
box-shadow: 0 0 rgba(22,160,133,.6);
} to {
-webkit-box-shadow: 0 0 0 20px rgba(22,160,133,0);
-moz-box-shadow: 0 0 0 20px rgba(22,160,133,0);
box-shadow: 0 0 0 20px rgba(22,160,133,0);
} }
@keyframes play_down { 0%
{
-webkit-box-shadow: 0 0 rgba(22,160,133,.6);
-moz-box-shadow: 0 0 rgba(22,160,133,.6);
box-shadow: 0 0 rgba(22,160,133,.6);
} to {
-webkit-box-shadow: 0 0 0 20px rgba(22,160,133,0);
-moz-box-shadow: 0 0 0 20px rgba(22,160,133,0);
box-shadow: 0 0 0 20px rgba(22,160,133,0);
} }
@media only screen and (min-width: 320px) and (max-width: 600px) {
.callback-widget-desc {display:none;}
.callback-widget-mob {
display: block;
width: 56px;
height: 56px;
position: fixed;
bottom: 50%;
right: 43px;
border-radius: 50%;
z-index: 10000;
border: 0px cursor: pointer;
-webkit-animation-name: 'play_down';
-moz-animation-name: 'play_up';
animation-duration: 1.5s;
animation-iteration-count: infinite;
box-shadow: 0 0 0 3px rgba(22, 160, 133, .5);}
.phonewebp {width:56px;height:56px;margin:0!important;}
#content > div.callback-widget-mob > span {font-size: 35px!important;overflow-x:hidden!important;}
#content > div.callback-widget-mob > a > i {height: 56px;width: 56px;line-height: 55px;padding-top:0px;font-size: 35px!important;overflow-x:hidden!important;}
} ВИДЖЕТЫ МЕССЕНДЖЕРОВ СКРИПТ
При клике на кнопку разворачиваются картинки с мессенджерами, простой скрипт на JS, можете добавить любой мессенджер какой хотите.
<!-- ВИДЖЕТЫ МЕССЕНДЖЕРОВ СПРАВА ВНИЗУ НАЧАЛО -->
<div class="callback-widget">
<div class="item item1"><a class="phone" href="tel:+79800005665" title="Телефон +7 (980) 000-56-65" rel="nofollow" target="_blank"></a></div>
<div class="item item2"><a href="https://t.me/NewSeoDay" title="Telegram" target="_blank" rel="nofollow" target="_blank"></a></div>
<div class="item item3"><a href="https://api.whatsapp.com/send?phone=79800005665" title="WhatsApp" target="_blank" rel="nofollow" target="_blank"></a></div>
<div class="callback-widget-btn"></div>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
const callbackBtn = document.querySelector('.callback-widget-btn');
const items = {
item1: document.querySelector('.item1'),
item2: document.querySelector('.item2'),
item3: document.querySelector('.item3')
};
callbackBtn.addEventListener('click', function(e) {
e.preventDefault();
this.classList.toggle('active');
if (this.classList.contains('active')) {
fadeIn(items.item3, 500);
setTimeout(() => fadeIn(items.item2, 350), 250);
setTimeout(() => fadeIn(items.item1, 450), 550);
} else {
fadeOut(items.item1, 500);
setTimeout(() => fadeOut(items.item2, 350), 250);
setTimeout(() => fadeOut(items.item3, 450), 550);
}
});
function fadeIn(element, duration) {
element.style.opacity = 0;
element.style.display = 'block';
let start = performance.now();
function animate(time) {
let elapsed = time - start;
element.style.opacity = Math.min(elapsed / duration, 1);
if (elapsed < duration) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);
}
function fadeOut(element, duration) {
element.style.opacity = 1;
let start = performance.now();
function animate(time) {
let elapsed = time - start;
element.style.opacity = Math.max(1 - elapsed / duration, 0);
if (elapsed < duration) {
requestAnimationFrame(animate);
} else {
element.style.display = 'none';
}
}
requestAnimationFrame(animate);
}
});
</script>
<!-- ВИДЖЕТЫ МЕССЕНДЖЕРОВ СПРАВА ВНИЗУ КОНЕЦ -->CSS
.item{position: fixed;display:none;width:70px;height:70px;border-radius:50%;}
.item1{bottom:270px;right:20px;background-image: url(/webpmess/telefon-1.webp);background-size:cover;}
.item2{bottom:190px;right:20px;background-image: url(/webpmess/telegram-1.webp);background-size:cover;}
.item3{bottom:110px;right:20px;background-image: url(/webpmess/whatsup-1.webp);background-size:cover;}
.item1 a{display:block;width:70px;height:70px;}
.item2 a{display:block;width:70px;height:70px;}
.item3 a{display:block;width:70px;height:70px;}
.callback-widget-btn{
width: 70px;height: 70px;background-image: url(/webpmess/messagevid-1.webp);
background-size:cover;border-radius: 50%;position: fixed;bottom:10px;
right:20px;cursor:pointer;animation-duration: 1.5s;animation-iteration-count: infinite;}----------------------
