Кнопка прокрутки вверх для сайта, как добавить кнопку на сайт без плагина!

Кнопка вверх для сайта

Всем привет! Меня иногда спрашивают , как сделать кнопку прокрутки вверх для сайта как ту, что вы видите справа, как добавить такую кнопку «вверх» на сайт и какой плагин я для этого использую.

Это не плагин, стараюсь не злоупотреблять ими и если есть хорошо работающее решение для каких-то интересных технических моментов без использования плагинов, то я пробую их реализовать на своем сайте.

Чтобы сделать оригинальную кнопку прокрутки на своем сайте, вам понадобится скрипт и исходник самой кнопки. В интернете полным-полно различных способов, как это сделать, но не все они могут работать, все будет зависеть от того, какую тему оформления вы используете.

Для того, чтобы реализовать эту идею на своем сайте, мне пришлось перепробовать кучу всяческих способов, но ни один из них либо вообще не хотел работать, либо работал не так, как нужно. И вот, наконец то решение было найдено, не буду тянуть кота за одно место, перехожу непосредственно к сути самого вопроса.

Как добавить кнопку вверх на сайт:

Для того, чтобы на вашем сайте появилась кнопка динамической, т.е. плавной прокрутки страницы, вам понадобится следующий Jawa скрипт код:

чтобы выделить код для копирования, кликните по нему дважды

(function() {  

function $(id){
    return document.getElementById(id);
}  

function goTop(acceleration, time) {
    acceleration = acceleration || 0.1;
}
    time = time || 12;  

    var dx = 0;
    var dy = 0;
    var bx = 0;
    var by = 0;
    var wx = 0;
    var wy = 0;  

    if (document.documentElement) {
        dx = document.documentElement.scrollLeft || 0;
        dy = document.documentElement.scrollTop || 0;
    }
    if (document.body) {
        bx = document.body.scrollLeft || 0;
        by = document.body.scrollTop || 0;
    }
    var wx = window.scrollX || 0;
    var wy = window.scrollY || 0;  

    var x = Math.max(wx, Math.max(bx, dx));
    var y = Math.max(wy, Math.max(by, dy));  

    var speed = 1 + acceleration;
    window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
    if(x > 0 || y > 0) {
        var invokeFunction = "top.goTop(" + acceleration + ", " + time + ")"
        window.setTimeout(invokeFunction, time);
    }
    return false;
}  

//*
function scrollTop(){
    var el = $('gotop');
    var stop = (document.body.scrollTop || document.documentElement.scrollTop);
    if(stop>400){
        if(el.style.display!='block'){
            el.style.display='block';
            smoothopaque(el, 0, 100, 1);
        }
    }
    else
        el.style.display='none';  

    return false;
}  

// Плавная смена прозрачности
function smoothopaque(el, startop, endop, inc){
    op = startop;
    // Устанавливаем прозрачность
    setopacity(el, op);
    // Начинаем изменение прозрачности
    setTimeout(slowopacity, 1);
    function slowopacity(){
        if(startop < endop){
            op = op + inc;
            if(op < endop){
                setTimeout(slowopacity, 1);
            }
        }else{
            op = op - inc;
            if(op > endop){
                setTimeout(slowopacity, 1);
            }
        }
        setopacity(el, op);
    };
};
// установка opacity
function setopacity(el, opacity){
    el.style.opacity = (opacity/100);
    el.style.filter = 'alpha(opacity=' + opacity + ')';
};  

if (window.addEventListener){
    window.addEventListener("scroll", scrollTop, false);
    window.addEventListener("load", scrollTop, false);
}
else if (window.attachEvent){
    window.attachEvent("onscroll", scrollTop);
    window.attachEvent("onload", scrollTop);
}     

window['top'] = {};
window['top']['goTop'] = goTop;           

})();

Это уже готовый скрипт, не требующий никаких изменений, все, что нужно сделать, это скопировать его в блокнот на рабочий стол и сохранить под названием, например «scrolling.js» или как угодно, главное чтобы расширение было «js». Теперь этот файл нужно поместить в папку со скриптами вашей активной темы. Многие предлагают поместить этот файл в корневую директорию wordpress, я пробовал, все работало, но только не было динамического эффекта, прокрутка осуществлялась мгновенно, данный баг устранился, когда скрипт был помещен в директорию моей темы. Путь установки скрипта должен быть следующим:

http://вашсайт.ru/wp-content/themes/ваша тема/lib/js/scrolling.js

Главное, чтобы скрипт был в папке с вашей темой. Ну а на следующем этапе нужно подобрать картинку со стрелкой, расширение картинки должно быть в формате png. Можете поискать картинки в сети, если владеете фотошопом, то лучше сделать самому, причем, чтобы картинка изменяла цвет при наведении на нее мышкой, нужно, чтобы она была вот такой:

кнопка прокрутки вверх для сайта

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

Картинку нужно закинуть в папку  «images» вашей активной темы! Для того, чтобы она появлялась на вашем сайте при прокрутке страницы вниз, нужно в файл «Footer.php» перед закрывающим тегом </body>  вставить следующий код:

<a id="gotop" href="#" onclick="top.goTop(); return false;" title="Наверх"></a>
<script type="text/javascript" src="http://Ваш сайт.ru/wp-content/themes/Ваша тема/lib/js/scrolling.js"></script>

Замените в коде переменные данные «Ваш сайт», «Ваша тема» на свои.

Теперь, чтобы кнопка прокрутки вверх для сайта стала работать, нужно сделать последний штрих, для этого нужно в самом конце файла «style.css» вашей темы вставить следующий фрагмент кода:

#gotop {
position: fixed;
bottom: 60px;
width: 80px;
height: 160px;
margin-left: 90%;
background: url(http://Ваш сайт.ru/wp-content/themes/Ваша тема/images/название картинки.png) no-repeat 0 0;

#gotop:hover {
background: url(http://Ваш сайт.ru/wp-content/themes/Ваша тема/images/название картинки.png) no-repeat 0 -142px;
}

Не забываем заменить переменные данные на свои, все цифровые значения так же нужно будет подкорректировать опытным путем, если вы используете изображение стрелки с этой страницы, то вам нужно будет только скорректировать элемент «margin-left» и  возможно элемент второй части кода «no-repeat». Второй кусок кода отвечает за изменение цвета стрелки при наведении, можно сделать простой вариант без изменения цвета, взять одинарную картинку и тогда эта часть кода не потребуется.

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

8 Responses to Кнопка прокрутки вверх для сайта, как добавить кнопку на сайт без плагина!

  1. Роман:

    Всё сделал строго по инструкции, но кнопка не появилась, не знаю куда капать даже ))

    • Проверь внимательно путь к картинке, это первое, а еще может она за областью экрана, нужно в файле style.css в параметре «margin-left» опытным путем подобрать нужное числовое значение, также и все остальные переменные данные нужно подбирать опытным путем под свою разметку…

  2. Зинаида:

    Попыталась поставить кнопку вверх, не получилось. Всё делала по инструкции. Обидно. Спасибо.

  3. У Вас там ошибочка. Скобки после первого селектора CCS не хватает…. Строка 8 ))

  4. Ольга:

    Привет! А картинки можно поменять в коде?

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

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