Чем проще навигация на вашем сайте, тем удобнее им пользоваться. Сегодня все чаще в рунете можно встретить кнопку “подняться вверх”. Она обычно появляется в нижнем углу сайта при скролле и прячется, если страница прокручивается вверх.

Я расскажу вам, как сделать такую же кнопку за 10 минут. Неважно, на каком движке работает ваш сайт: на WordPress, Bitrix, Drupal, Joomla, UCOZ или DLE, вы можете ставить эту кнопку куда угодно, хоть на одностраничный ресурс.

Решать вопрос мы будем при помощи javascript. Я предложу вам два варианта решения: с jQuery и на простом js. Начнем с самого простого — первого.

Добавление кнопки “вверх”

Для начала добавьте в самый низ макета вашего сайта (лучше всего в footer) код кнопки:

<div id="scrollup"><img alt="Прокрутить вверх" src="/img/up.png"></div>

Загрузите кнопку, которая будет отображаться в блоке, я назвал ее up.png и загрузил в корневую папку /img/.

Найти крутые иконки и кнопки можно на www.iconfinder.com.

Теперь нужно открыть CSS-редактор и добавить стили для кнопки:

#scrollup {
position: fixed; /* фиксированная позиция */
opacity: 0.8; /* прозрачность */
padding: 15px 10px 10px; /* отступы */
background: #aaa;
border-radius: 5px; /* скругление углов */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
left: 10px; /* отступ слева */
bottom: 10px; /* отступ снизу */
display: none; /* спрятать блок */
cursor: pointer;
}

Далее либо добавляем js-код в уже существующий файл с остальными скриптами, либо подключаем новый:

<script type='text/javascript' src='/js/scrollup.js'></script>

Дальше нужно написать саму функцию скролла.

Вариант №1: с использованием jQuery

Если у вас уже подключена jQuery, нужно сделать следующее: в scrollup.js добавляйте такой код:

jQuery( document ).ready(function() {
	jQuery('#scrollup img').mouseover( function(){
		jQuery( this ).animate({opacity: 0.65},100);
	}).mouseout( function(){
		jQuery( this ).animate({opacity: 1},100);
	}).click( function(){
		window.scroll(0 ,0); 
		return false;
	});

	jQuery(window).scroll(function(){
		if ( jQuery(document).scrollTop() > 0 ) {
			jQuery('#scrollup').fadeIn('fast');
		} else {
			jQuery('#scrollup').fadeOut('fast');
		}
	});
});

Если jQuery еще не подключен, тогда перед подключением scrollup.js нужно подключить ее:

<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>

Вариант №2: на простом js

Если вы любите простоту, можно обойтись простым javascript:

window.onload = function() { // после загрузки страницы

	var scrollUp = document.getElementById('scrollup'); // найти элемент

	scrollUp.onmouseover = function() { // добавить прозрачность
		scrollUp.style.opacity=0.3;
		scrollUp.style.filter  = 'alpha(opacity=30)';
	};

	scrollUp.onmouseout = function() { //убрать прозрачность
		scrollUp.style.opacity = 0.5;
		scrollUp.style.filter  = 'alpha(opacity=50)';
	};

	scrollUp.onclick = function() { //обработка клика
		window.scrollTo(0,0);
	};

// show button

	window.onscroll = function () { // при скролле показывать и прятать блок
		if ( window.pageYOffset > 0 ) {
			scrollUp.style.display = 'block';
		} else {
			scrollUp.style.display = 'none';
		}
	};
};

Посмотреть и скачать

Теперь у вас есть два способа добавить кнопку “прокрутить вверх” себе на сайт. Пример вы можете увидеть здесь:

Обновлено: добавлен WordPress-плагин для создания такой кнопки. Обсуждение на форуме в теме Плагин WP-Scrollup для кнопки “вверх”.

    Отправить ответ

    51 Комментарий на "Как сделать “кнопку вверх” для прокрутки сайта без плагинов"

    Уведомлять
    avatar
    5000
    artem bob
    Гость

    Как то сложно. можно и попроще сделать

    Юрий
    Гость

    Хорошая статья. Спасибо большое автору. Но я бы данный фрагмент кода js/jquery заменил бы на CSS hover с использованием transition. Кода было бы меньше, а результат по сути тот же.
    jQuery(‘#scrollup img’).mouseover( function(){
    jQuery( this ).animate({opacity: 0.65},100);
    }).mouseout( function(){
    jQuery( this ).animate({opacity: 1},100);
    }).click( function(){
    window.scroll(0 ,0);
    return false;
    });

    Max
    Гость

    Ошибка плагина для wordpress
    Parse error: syntax error, unexpected end of file in /var/www/girls/data/www/…/wp-content/plugins/wp-scrollup/wp-scrollup.php on line 215

    Роман
    Гость

    Я не знаю, где обсуждалась позиция кнопки, но у меня ни в какую не получается её отобразить справа. Код кнопки ставлю перед . Никакие манипуляции с флоат и иже с ними не помогают как быть?

    Алексей
    Гость

    Спасибо друг! Очень полезная статья!

    Alex
    Гость

    Если заменить:
    window.scroll(0 ,0);
    На такое:
    $('body,html').animate({ scrollTop: 0 }, 800);
    Будет гораздо интересней результат.

    Валерий
    Гость

    В браузере Firefox открыл “демо” для Firefox, судя по картинке ссылки. У меня страница скачет вверх, как при обычной якорной ссылке. К чему тогда здесь все эти скрипты?

    Дмитрий
    Гость

    Ваш пример не работает в IE ниже 9 версии. И вроде бы давно считается плохим тоном использовать в таких случаях png, ведь можно юникод символы использовать, например ⇑ – будет работать даже в IE5. А для указания что надо подняться наверх вам уже рекомендовали использовать id, но я добавлю, что можно просто # указать и в современных браузерах и десктопных, и мобильных при этом страница прокручивается к началу без перезагрузки.

    Алексей
    Гость

    Спасибо, то что нужно! Сайт в закладки – очень много интересненького)

    Дима
    Гость

    Спасибо большое , уже не в первый раз меня выручаешь )

    Олег
    Гость

    Здравствуйте, помогите пожалуйста.
    Устанавливаю скрипт в 2-х вариантах (jQuery, JS), но работает только на главной странице. В разделах каталога не работает. С вариантом “jQuery” понятно что может конфликтовать, а с “JS” почему не работает?

    Юрий
    Гость

    Сделал все как нужно пошагово. Сайт на Joomla 1.5. Не могу найти ошибку, все добавил как нужно..

    Алекс
    Гость

    @Юрий, столкнулся с аналогичной проблемой, только на WordPress. Помогла замена пути “/js/scrollup.js” на полный url “http://мой сайт/…/js/scrollup.js”. Аналогичная манипуляция в строке, указывающей на картинку.

    kl1nt
    Гость

    var scrollBut = document.getElementById(“scrollBut”);

    scrollBut.onclick = function() {
    var counter = window.pageYOffset;
    n = counter / 50;
    function qwe() {
    counter = counter – n;
    window.scrollTo(0, counter);
    if (counter == 0 || counter < 0) {
    clearInterval(timer);
    };
    }
    var timer = setInterval(qwe, 10);
    }

    Плавная прокрутка. Универсальность в том, что не зависимо от того, как страница опущена вниз, скрипт прокручивает страницу с одинаковой скростью

    kl1nt
    Гость

    @Назар Токарь, Разве? Я замерял и всегда по 3 секунды получалось(вне зависимости от того, где сам скролл) при
    n = counter / 300

    kl1nt
    Гость

    @Назар Токарь, Скорость зависит от положения юзера на странице(проверял) т.к. Counter – это как сильно опустился на странице юзер,а не длинна страницы

    Миша
    Гость

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

    Rio
    Гость

    @Назар Токарь, Я извиняюсь, вроде всё делаю как написано, не появляется кнопка, взял метод на яваскрипте, но до последнего не пойму что не так, сделал пошагово, всё добавил, но кнопка убей не появляется

    Rio
    Гость

    @Назар Токарь, Ну правильно, потому что я убрал его, чтоб не подгружалось лишнее.

    Alex Corn
    Участник

    размер кнопки здесь меньше чем в демо. Как сделать меньше?=)

    Рим
    Гость

    Спасибо за аналог без джеквери, интересны какраз такие принципы реализации без тренда который поднялся на волне джеквери.

    Андрей
    Гость

    А как изменить позицию кнопки? Допустим мне не левый низ нужен а правый верх или середина? Как прописать в css правильно позицию?

    Макс
    Гость

    Еще один момент )
    Сегодня зашел на главную страницу вашего сайта в надежде через поиск найти нужную информацию… Но не нашел сам поиск! Немного не удобно при желании быстро найти нужную информацию…
    Пришлось искать через Яндекс.
    p.s. Я думаю два моих последних сообщения можно удалить. Спасибо.

    Макс
    Гость

    Второе предложение: Сегодня все чаще в рунете на можно
    встретить кнопку «подняться вверх». предлог “на” помоему
    лишний

    Макс
    Гость

    То что надо! От плавного скрола болят глаза ) Назарю
    респект. Кстати, кнопка Форум на этом сайте смотрится как-то уж
    совсем тоскливо на мониторе full hd… Спасибо.

    Алекс
    Гость

    Всем привет поставил себе на сайт эту кнопку все работает
    супер но не могу понять как изменить сам размер кнопки вверх вот
    сайт
    http://www.zdorovoepitanie.pp.ua/%D1%81%D1%82%D0%B0%D1%82%D1%8C%D0%B8.html
    подскажите плз

    Steel Ice
    Гость

    а сделать в верху [a name=”top”]
    и в нужном месте просто [a href=#top] религия не позволяет? ;)

    Вадим
    Гость

    Спасибо! Как всегда “просто” и “нужно”. Попробуем.

    Виталий
    Гость

    Есть еще вариант с плавной прокруткой, без быстрого перескакивания. Сделано тут http://blog.photosale.in.ua
    Могу поделиться исходниками, если интересно.

    Виталий
    Гость

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

    Виталий
    Гость

    @Назар Токарь, браузерное ведь решение, должно работать. На Win 7 все хорошо.

    ZFjoury
    Гость

    Ага, ещё бы плавную прокрутку))
    А так супер вариант =) Простой, легкий)

    ZFjoury
    Гость

    @Назар Токарь, Эх, вот этого не знал=) Спасибо)

    wpDiscuz